Открыть меню    

Как нарисовать сайт в фотошопе. Проектирование дизайна.

Основная цель страницы сайта обеспечить рекламу бизнесу и поддержку сервису этого бизнеса.

Это первая часть статьи по проектированию делового веб-сайта. Первая часть статьи будет посвящена проектированию сайта в фотошопе. Во второй части мы преобразуем PSD результат в XHTML шаблон.

Конечный результат

На изображении проект, который мы будем делать. Кликните по изображению и увидите проект в натуральную величину.

сам проект

Общее представление

В этой статье я предполагаю, что вы имеете базовый представления о фотошопе и знаете, о том, как делать базовые вещи, например, добавить текст, нарисовать форму, изменить размеры, вращать объект.

Моя цель в этой статье показать, что не всегда необходимо большое количество эффектов в дизайне, чтобы сделать привлекательный шаблон. Несколько шрифтов и немного эффектов, позволят спроектировать профессиональный дизайн, который произведет на ваших посетителей приятное впечатление.

У дизайна, который мы собираемся проектировать есть header, который содержит название компании и область навигации. В области под header на первый план выдвигаются основные моменты бизнеса и вспомогательные детали.

Далее следует область, в которой описывается сервис и другие детали. В нижней секции будут присутствовать отзывы клиентов и краткий обзор проекта.

С помощью отзывов клиентов и краткого обзора проекта попытаемся построить доверительные отношения с потенциальными клиентами.

Наконец, в самом низу у нас будет нижняя сноска, которая содержит стандартную информацию об авторских правах.

Создание документа

1 Создайте новый документ размером 1100px X 1500px. Затем добавьте 2 вертикальные направляющие на 70px и 1030px, что даст нам ширину в 960px, которая легко приспособится к большинству экранам.

рисуем сайт 1

Создание Header

2 Начнем создавать header с добавления фона. Выберите инструмент Rectangle Tool (прямоугольник), в качестве основного цвета (Foreground Color) установите темно-серый цвет (#333333), и затем протяните прямоугольник высотой 130px от левого края до правого.

рисуем сайт 2

Добавление названия сайта, логотипа

3 Чтобы добавить название компании, установите шрифт Myriad Pro. Установите размер шрифта 60px, цвет светло-серый (#EEEEEE), расстояние между буквами (tracking) -40px. Вы можете установить все эти значения в панели Character (шрифт) (Window > Character). С помощью инструмента Horizontal Type Tool (T) напечатайте название компании и расположите его напротив левой направляющей.

рисуем сайт 3

Создание навигации

4 Чтобы добавить навигационную область, установите шрифт Arial. Размер шрифта 16px и цвет #EEE. Напечатайте некоторые названия (например, о проекте, реклама, контакты, услуги) и разделите двумя дефисами.

рисуем сайт 4

Создание первой контент секции

5 Для того чтобы создать область с контентом, нам необходимо добавить заголовок в эту область. Установите шрифт Myriad Pro, назначьте толщину шрифта bold, размер шрифта 60px, расстояние между буквами (tracking) -40px и цвет #333333. Напечатайте название с помощью инструмента Horizontal Type Tool (T).

рисуем сайт 5

6 Чтобы немного выделить заголовок, изменим цвет амперсанды (&) на светло-синий (#00BFF3).

рисуем сайт 6

7 Снизу нам необходимо добавить подзаголовок. Установите шрифт Myriad Pro, толщину шрифта Regular, шрифт 50px, и цвет #ссс. Напечатайте заголовок и поместите его под основной заголовок.

рисуем сайт 7

8 Теперь нам необходимо добавить краткий обзор того, что делает наша компания. Установить размер шрифта 30px, цвет #CCCCCC и напечатайте ряд точек от левой направляющей до правой.

рисуем сайт 8

9 Создайте копию (выберите текстовый слой на панели слоев и затем нажмите Ctrl/Cmd + J) этой горизонтальной пунктирной линии, и затем поместите ее примерно на 100px ниже первой линии.

рисуем сайт 9

10 Теперь нам необходимо добавить текст между линиями. Установите шрифт Myriad Pro, размер шрифта 34px, цвет #555555, межстрочный интервал (letter spacing) 42px, расстояние между буквами (tracking) -40px, и затем напечатайте несколько строчек текста.

рисуем сайт 10

11 Вы можете захотеть выделить некоторые ключевые слова, тогда сделайте их шрифт жирным, чтобы акцентировать на них внимание; я выбрал случайные слова.

рисуем сайт 11

Добавление деталей сервиса

12 Теперь нам требуется добавить некоторые детали о наших услугах. Выберите инструмент Rectangle Tool (прямоугольник), в качестве основного цвета (Foreground Color) установите #00AEEF, и нарисуйте прямоугольник размером 280x350px, расположите его напротив левой направляющей.

рисуем сайт 12

13 Чтобы немного выделить эту коробку, применим стиль слоя Drop Shadow (Отбросить тень) (двойной клик мышки по слою откроет диалоговое окно Стиль Слоя); в Drop Shadow, где цвет, установите серый цвет (#AAAAAA).

рисуем сайт 13

Коробка должна стать более выразительной. Как видите, по краям образовалась небольшая тень.

рисуем сайт 13а

14 Сейчас нам требуется добавить название нашему сервису. Выберите инструмент Horizontal Type Tool и установите шрифт Myriad Pro, размер шрифта 40px, и цвет текста белый (#FFFFFF). Растяните текстовый блок от правого края коробки до левого края и назначьте выравнивание текста по центру. Затем напечатайте заголовок.

рисуем сайт 14

15 Сейчас установите размер шрифта 18px и напечатайте ряд точек, которые станут пунктирной линией.

рисуем сайт 15

16 После этого, установите размер шрифта 15px и протяните текстовый блок от левого края коробки до правого, затем напечатайте текст, описывающий вашу услугу.

рисуем сайт 16

17. Наконец, нам требуется добавить кнопку у основания коробки. Выберите инструмент Rectangle Tool, установите синий цвет (#0076A3), и нарисуйте блок размером 230x40px.

рисуем сайт 17

18 Зайдите в стили слоя и примените Inner Glow (внутреннее свечение) к кнопке, где цвет установлен темно-синий - я использовал #235162.

рисуем сайт 18
рисуем сайт 18а

19 Промаркируем кнопку. Установите размер шрифта 18px и тип uppercase (заглавные буквы), напечатайте, например, "УЗНАТЬ БОЛЬШЕ".

рисуем сайт19

Первые блок сделан.

20 Создайте две копии этого блока, дублируя первый блок и весь контент внутри него. Воспользуйтесь инструментом перемещение (Move Tool), чтобы расположить блоки равномерно. Также поменяйте детали в каждом блоке.

рисуем сайт 20

21 Чтобы закончить с этим разделом, сделайте копию пунктирной линии, которую мы сделали в предыдущем шаге, и расположите ее у основания раздела.

рисуем сайт 21

Добавление клиентских отзывов

22 Для клиентского блока нам для начала необходимо сделать заголовок. Установите шрифт Myriad Pro, размер шрифта 24px, цвет темно-серый (#555555), и напечатайте текст «мнения клиентов» Horizontal Type Tool (T).

рисуем сайт 22

23 Теперь для первого клиента, оставившего рекомендацию, создадим рамку. Выберите инструмент Rectangle Tool, установите светло-серый цвет (#CCCCCC), и нарисуйте блок размером 84px X 84px.

рисуем сайт 23

24 Теперь добавьте свою фотографию, которая имеет размеры чуть меньшие, чем блок.

рисуем сайт 24

25 Далее, нам требуется добавить некоторый текст, следующий за фото. Установите шрифт Arial, размер шрифта 14px, и воспользуемся темно-серым цветом, который мы использовали для клиентского заголовка (#555555), напечатайте какой-нибудь фиктивный текст.

рисуем сайт 25

26 Установите толщину шрифта bold и напечатайте имя автора. На следующей строке напечатайте принадлежность автора (название его организации/компании) и установите ярко-синий цвет (#00AEEF).

рисуем сайт 26

27 Создайте две копии клиентского блока, дублируя первый блок и весь контент внутри него. Расположите блоки друг под другом с одинаковым промежутками между ними, поменяйте в них содержание и изображения.

рисуем сайт 27

28 Теперь нам требуется добавить вертикальную перегородку для правой клиентской секции. Создайте копию пунктирной линии, которую мы сделали ранее, и отрежьте от нее примерно половину. Разверните линию на 90 градусов (Edit > Transform > Rotate 90o CCW) и расположите ее у правого края клиентского блока.

рисуем сайт28

Создание секции проекта

29 Создавать будущую секцию проекта начнем с добавления заголовка. Установите шрифт Myriad Pro, размер шрифта 24px, цвет темно-серый (#555555), и затем напишите «Особенность проекта».

рисуем сайт 29

30 Сейчас добавим заголовок проекта. Установите размер шрифта 20px, цвет серый (#888888), и напечатайте текст.

рисуем сайт 30

Чуть ниже заголовка нам потребуется скриншот проекта размером 430x200px.

рисуем сайт 30а

31 Затем добавьте некоторый текст, описывающий проект. Установите шрифт Arial, размер шрифта 14px, цвет темно-серый (#555555), и напечатайте несколько строчек текста.

рисуем сайт 31

32 Также включите некоторый текст, который скажет пользователю о том, что это ссылка. Цвет к ссылке я установил светло-голубой (#00AEEF

33 Наконец, скопируйте пунктирную линию к основанию секции.

рисуем сайт33

Делаем FOOTER

34 Footer будет очень простой. Установите шрифт Arial, размер шрифта 16px, цвет темно-серый (#888888), и напечатайте какой-нибудь текст соответствующий подвалу.

рисуем сайт 34

Все закончили!

Комментарии к статье

аватарка пользователя
2011-07-20
Константин

Размеры шрифтов указаны неверно. Размер шрифта 34px в пункте 10 не соответствует шрифту на картинке. Визуально шрифт на картинке выглядит меньше. Трекинг также вообще не соответствует картинкам. Хотя в целом туториал понравился. Поправьте все размеры.

аватарка пользователя
2011-07-21
костя

обязательно поправлю, как время будет, а так все изображения, приведенные в статье, можно сравнить с исходниками Создание шаблона сайта из PSD

аватарка пользователя
2012-07-03
Nekasder

Спасибо !!! Очень классный урок !!!

аватарка пользователя
2014-03-10
Лариса

Большое спасибо автору! Зря придираются к мелочам ;) Размер шрифта можно подобрать и визуально. А в целом все предельно ясно!

Добавить комментарий