Создание профессионального шаблона для сайта

Профессиональный дизайн шаблона сайта, сделанный в Фотошопе

В этом уроке мы рассмотрим, как создается эстетически-привлекательный веб 2.0 шаблон для сайта. По ходу урока вы ознакомитесь с массой техник, которые вам в дальнейшем пригодятся в работе дизайнера. Наверное, он слишком большой? Ну что ж, это из-за детализации объяснений. Уверен, он вам не покажется чересчур сложным, поэтому, не задумываясь, приступайте к выполнению.

1 Шаг

Для того чтобы все получилось выровненным, используем сетку 960s Grid System (скачайте ее отсюда). После загрузки пакета сеток, откройте файл 960_grid_24_col.psd.

Начнем с создания слоя из фона. Нажмите по слою “Background”, затем выберите пункт Layer From Background в выпавшем меню. В появившемся окне задайте название слоя “bg”.

2 Шаг

Сейчас нам нужно будет включить линейки, так как придется часто работать с направляющими. Сделать это можно при помощи меню View > Rulers.

3 Шаг

Зададим нижнюю границу для шапки — поместим горизонтальную направляющую на отметке в 100px по вертикали. Для этого выполните View > New Guide, Position: 100.

4 Шаг

Займемся созданием шапки. Начнем с создания выделения размером 1020×100px, после чего нажатием Shift + Backspace заливаем его каким-нибудь цветом на новом слое (будет автоматически использован основной цвет — выбор цвета не критичен).

В соответствии с приведенным ниже изображением, примените к слою градиент.

Затем переименуйте слой в “header_bg”.

5 Шаг

Нанесите название своего сайта, используя следующие параметры шрифта:

  • Font Family — Rockwell (можно скачать здесь)
  • Font Size — 30px
  • Font Weight — Regular
  • Anti-aliasing — Smooth
  • Color — не важен (мы для этого используем Gradient Overlay в стилях слоев)

Теперь добавим к тексту стиль Gradient Overlay со следующими настройками:

Для выравнивания названия веб-сайта с фоном шапки выберите слои “header_bg” и ваш текст в палитре Layers, а затем нажмите кнопку Align Vertical Centers в панели верхней части экрана.

6 Шаг

Нанесите навигационные ссылки со следующими настройками:

  • Font-Family: Arial
  • Font-Size: 20px
  • Font-Weight: Regular
  • Anti-Aliasing: Smooth
  • Color: #FFFFFF

Теперь создайте прямоугольник со скругленными углами, который будет обозначать выделенную ссылку. Он должен быть размером порядка 65×35 px с радиусом углов в 5px (цветом можно закрашивать любым).

Задайте слою стили Stroke и Gradient Overlay в соответствии с изображением:

Перед тем как перейти к следующему шагу, взгляните на то, как у вас организованы слои в панели Layers. Посмотрите теперь, как это сделано у меня:

7 Шаг

Время создать область с прокруткой изображений. Начнем с добавления очередной горизонтальной направляющей, ограничивающей область снизу. Поместите ее на уровне 430px по вертикали от последней горизонтальной направляющей.

Создайте выделение размерами 1020×430px для фона области и залейте его любым цветом на новом слое.

Затем задайте слою Gradient Overlay в меню стилей слоя:

Теперь давайте создадим глянцевый эффект. Растяните выделение 1020×120px и залейте его каким-нибудь цветом на новом слое.

Затем применим к слою стиль Gradient Overlay. Используйте параметры из приведенной ниже иллюстрации.

Здесь понизьте Opacity этого слоя до 40%.

8 Шаг

Добавим еще несколько штрихов. При помощи Single Row Marquee Tool создайте выделение шириной в 1px и выровняйте его, как показано ниже:

Выберите основным цвет #acd86e, а затем нажмите Alt + Backspace для заливки выделенной полоски на новом слое. Убедитесь, что цветом заливки у вас выбран именно основной, а не фоновый.

Великолепная детализация гарантирована!

С фоновыми элементами мы разобрались. Поэтому теперь задайте им соответствующие имена, организуйте все по папкам и сгруппируйте где нужно.

9 Шаг

Проведем еще две направляющих в соответствии с приведенным изображением.

Напишите несколько приветственных слов с такими параметрами:

  • Font Family: Rockwell
  • Font Size: 40px
  • Font Weight: Regular
  • Anti-Aliasing: Sharp
  • Color: #F4F4F4

Лично я написал вот что: “Here’s our brand new work. Oops Welcome!”. Сейчас нам нужно как-то выделить слово “Welcome!”. Для этого элементарно задайте ему стиль Gradient Overlay, руководствуясь иллюстрацией ниже.

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

Прежде чем распрощаться с этим шагом, проведите работу по организации текстовых слоев в палитре Layers.

10 Шаг

Начните с создания выделения размерами 250×150px (залейте его любым цветом на новом слое). Это будет рамка для нашего изображения.

Назовите этот слой “pic_holder” и постарайтесь расположить выделение, как показано выше на рисунке. Также задайте слою стиль Stroke.

Теперь нанесем на соответствующую область изображение. Для этого откройте File > Place и выберите изображение. Назовите появившийся слой “pic” и убедитесь, что он расположен прямо поверх слоя “pic_holder”.

Кликните правой клавишей мыши по слою “pic” и выберите пункт Create Clipping Mask из выпавшего меню.

11 Шаг

Для создания тени, продублируем два слоя: “pic” и “pic_holder”.

Выделив оба этих дубля, выполните Edit > Free Transform и задайте значение высоты равное -100.0%

После этого кликните правой клавишей мыши по этим выделенным слоям и выберите пункт Convert to Smart Object из выпавшего меню. Назовите получившийся слой “Shadow” и поместите его поверх слоев-оригиналов.

Выберите слой “Shadow” и добавьте к нему маску (кнопка Add Layer Mask внизу палитры Layers)

Переключитесь на Gradient Tool (G) и растяните его в режиме маски сверху вниз.

Вот что у вас должно получиться в результате. Пробуйте.

12 Шаг

Теперь нужно добавить описание к картинке. Создайте выделение размерами 240×25px и залейте его цветом #1A1919 — этот блок будет служить контейнером для описания.

Тексту описания задайте такие свойства:

  • Font Family: Arial
  • Font Size: 15 px
  • Font Weight: Regular
  • Anti-aliasing: None
  • Color: #82AA48

Не забывайте держать свой документ в порядке.

13 Шаг

Создайте еще одну подобную картинку, выровненную по правому краю.

Центральное изображение сделаем чуть побольше, поэтому создайте на этот раз выделение размером 340×200px, выровняйте его, как показано ниже и залейте каким-нибудь цветом на отдельном слое.

Также задайте слою обвод при помощи стиля Stroke. Руководствуйтесь иллюстрацией для задания параметров.

Вот, собственно, то, что должно получиться.

Наведите порядок в слоях и сгруппируйте их должным образом. Лично я создал три отдельных группы. Вот как это выглядит:

14 Шаг

Сейчас нарисуем кнопку пролистывания слайдов. Начнем с создания круга размерами 50×50px при помощи Elliptical Marquee Tool (M). Залейте выделенную область любым цветом на новом слое.

Теперь задайте слою некоторые стили в соответствии с рисунком ниже.

При помощи Custom Shape Tool (U) создайте стрелку и задайте ей такие стили:

Вот что должно получиться:

Не забудьте выровнять кнопку в соответствии с изображением.

Создайте еще одну копию стрелки и выровняйте ее уже по правой стороне.

15 Шаг

Теперь поработаем с областью основного контента. Создайте выделение размером 1020×815px.

Выберите основным цветом #E8E8E8 и при помощи Shift + Backspace залейте им выделение на новом слое.

С помощью Single Row Marquee Tool (M) создайте выделение шириной в 1px и поместите его, как показано на рисунке ниже. Залейте выделенную полоску белым цветом #FFFFFF.

Получилась отличная детализация перехода.

16 Шаг

Теперь нам нужно установить отступы для блока с основным контентом. Для этого вынесите новую горизонтальную направляющую на расстоянии 50px от верхнего края основного блока.

Скачайте сет с иконками Basic Set — Pixel Mixer и поместите следующую иконку, как показано ниже.

Перетащите очередную направляющую к нижней границе иконки, затем отступите от нее 20px и вынесите еще одну направляющую.

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

  • Font Family: Rockwell
  • Font Size: 29px
  • Font Weight: Regular
  • Anti-Aliasing: Sharp
  • Color: #81AA48

В соответствии с иллюстрацией ниже перетащите еще две направляющих, как показано.

Нанесите немного текста со следующими настройками:

  • Font-Family: Arial
  • Font Size: 15px
  • Font Weight: Regular
  • Anti-Aliasing: None
  • Color: #2F3235

В соответствии с иллюстрацией перенесите на рабочую область еще три направляющих:

17 Шаг

Пришло время создать кнопку “Read more”. Используя Rounded Rectangle Tool (U) создайте прямоугольник размерами 100×30px и радиусом 5px. Залейте его любым цветом.

Задайте этому прямоугольнику немного стилей, которые показано на рисунке ниже.

При помощи Ellipse Tool (U) создайте круг размером 15×15px и залейте его цветом #4D4D4D. Для корректного выравнивания выберите этот слой с кругом и слой с прямоугольником и нажмите кнопку Align Vertical Centers.

Нанесите на кружок значок “+” с клавиатуры белого цвета #FFFFFF.

Теперь нанесите слова “Read more” на кнопку со следующими параметрами текста:

  • Font Family: Tahoma (скачайте здесь)
  • Font Size: 12px
  • Font Weight: Regular
  • Anti-Aliasing: None
  • Color: #FFFFFF

Теперь примените к тексту стиль Drop Shadow. Выполните все, как показано на иллюстрации.

18 Шаг

Для создания вертикального разделителя, создайте две линии с помощью Line Tool (U) идущие друг рядом с другом. Первая должна быть белого цвета #FFFFFF, вторая — цвета #B3B3B3.

Поместите эту полоску, как показано на рисунке:

Не забывайте держать свои слои в надлежащем порядке!

19 Шаг

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

20 Шаг

Теперь создадим еще один разделитель. Нанесите очередную направляющую на расстоянии 50px от последней по вертикали.

При помощи Elliptical Marquee Tool (M) создайте выделение, как показано ниже.

Установите основной цвет черным #000000 и залейте им выделенную область, нажав Shift + Backspace, на новом слое. Назовите этот слой “Separator_bg”

Для размытия слоя примените фильтр Filter > Blur > Gaussian Blur с радиусом 3px.

Убедитесь, что вы находитесь на слое “Separator_bg” и создайте выделение, как показано ниже на рисунке. Затем нажмите Delete.

Кликните по кнопке Add Layer Mask и настройте свой инструмент Gradient Tool на цвета: черный — белый — черный.

Теперь инструментом Gradient Tool (G) растяните в режиме маски линейный градиент, как показано ниже.

Снизьте Opacity слоя до 50%.

С помощью Line Tool (U) создайте две горизонтальные линии шириной в 1px друг рядом с другом. Одна должна быть цвета #B3B3B3, вторая — #FFFFFF. Добавьте к ним такую же маску слоя.

21 Шаг

Начнем работать с содержимым нижней части после перетаскивания очередной направляющей, отстоящей от последней на 50px.

Нанесите надпись с такими параметрами шрифта:

  • Font Family: Rockwell
  • Font Size: 30px
  • Font Weight: Regular
  • Anti-Aliasing: Smooth
  • Color: #81AA48

В соответствии с изображением ниже нанесите на рабочую область еще две горизонтальных направляющих.

Нанесите еще какой-нибудь текст, используя такие настройки для шрифта:

  • Font Family: Arial
  • Font size: 14px
  • Font weight: Regular
  • Anti-aliasing setting: None
  • Color: #505150

Поместите ограничивающую блок основного контента по высоте направляющую на расстоянии 160px от последней строки текста.

22 Шаг

Нанесите еще одну надпись и сопутствующий текст, используя те же настройки для шрифтов, которые упоминались на предыдущем шаге.

Нарисуем красивые кавычки — нанесите их с клавиатуры и задайте тексту следующие параметры:

  • Font Family: Arial
  • Font Size: 200px
  • Font Weight: Regular
  • Anti-Aliasing: Smooth
  • Color: #505150

Теперь нанесите что-нибудь из вечных мыслей, либо напишите что вам больше по душе, используя следующие настройки для шрифтов:

  • Font Family: Arial
  • Font Size: 14px
  • Font Weight: Italic
  • Anti-Aliasing: Smooth
  • Color: #81aa48

23 Шаг

Для создания вертикального разделителя, нанесите две вертикальные линии друг рядом с другом шириной в 1px. Одну создайте белого цвета #FFFFFF, вторую — #B3B3B3.

Соблюдайте чистоту на рабочем месте — вот как я организовал свои слои:

24 Шаг

Нанесите какую-нибудь надпись, как мы уже делали это слева. Напишите что-нибудь о вашей команде (например, я назвал этот блок “Our Team” и заполнил его соответствующим образом).

При помощи Rectangle Tool (U) создайте прямоугольник размерами 90×90px и залейте его любым цветом. Назовите этот слой “photo1_holder”. Он будет служить рамкой для фото участников команды. Задайте слою обвод при помощи стиля Stroke.

Теперь перенесите на документ какое-нибудь фото члена команды и назовите этот слой “photo1”. Убедитесь, что этот слой находится прямо поверх слоя “photo1_holder”. Далее кликаем правой клавишей мыши по слою “photo1” и выбираем пункт Create Clipping Mask из выпавшего меню. Получиться у вас должно вот что:

25 Шаг

Теперь напишите что-нибудь об участнике, используя такие настройки для шрифта:

  • Font Family: Arial
  • Font size: 14px
  • Font Weight: Regular
  • Anti-Aliasing: Smooth
  • Color: #7ba344

Теперь самостоятельно создадим иконки основных социальных медиа. Начнем с Твиттера: наберите букву “t” с приведенными ниже параметрами шрифта.

  • Font Family: Pico-Black (скачайте его здесь)
  • Font Size: 30px
  • Font Weight: Regular
  • Anti-Aliasing: Smooth
  • Color: #2fcfff

После этого задайте букве стиль Stroke, как показано ниже.

Теперь создаем иконку под LinkedIn. Наберите слово “in” с такими настройками шрифта:

  • Font Family: Myriad Pro (скачайте его здесь)
  • Font Size: 30px
  • Font Weight: Bold
  • Anti-Aliasing: Smooth
  • Color: #0081ac

Остался Facebook. Нанесите букву “f” с такими настройками:

  • Font Family: Klavika (скачайте здесь)
  • Font Size: 30px
  • Font Weight: Bold
  • Anti-Aliasing: Smooth
  • Color: #395796

26 Шаг

Создайте копию фото члена команды. Выбрав слой с копией фото, переведите его в черно-белый, выполнив Layer > New Adjustment Layer > Black & White. Не забудьте отметить пункт “Use Previous Layer to Create Clipping Mask”.

Теперь размножьте те же самые иконки социальных медиа, созданных нами ранее, но всем им задавайте значение цвета #505150.

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

Создайте еще две таких копии и выровняйте их, как показано.

Для того чтобы однозначным образом добиться правильного выравнивания, создайте 4 отдельных группы, каждая из которых будет содержать всю информацию о члене команды, затем выделите все четыре группы в палитре Layers и кликните по кнопке Distribute Left Edges на панели в верхней части экрана.

Я навел порядок в своих слоях, а вы?

27 Шаг

Перед тем, как начать работу над блоком социальных сетей, необходимо добавить пару направляющих в соответствии с приведенным изображением ниже.

Создайте выделение размером 940×70px и выровняйте его, как показано ниже.

Залейте его любым цветом на новом слое и задайте стиль Gradient Overlay, как показано ниже.

Создайте прямоугольник размерами 70×45px и поместите его, как показано на рисунке ниже. Назовите этот слой “tw_bg”. Задайте стили, как показано на иллюстрациях.

Теперь спрячьте (выключите видимость) этот слой, чтобы работать свободнее. Создайте еще один прямоугольник 10×43px и выполните Edit > Transform Path > Skew. В панели настроек задайте такие параметры искажения по осям:

  • X: 40px
  • Y: 1253px
  • V: -39

Назовите этот слой “effect” и верните видимость слою “tw_bg”.

Скопируйте стиль слоя “tw_bg” и примените его также к слою “effect”.

Нанесите букву “t” с такими настройками для шрифта:

  • Font Family: Pico-Black
  • Font size: 35px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: не важен, так как мы сюда добавим Gradient Overlay

А теперь задайте слою соответствующие стили:

28 Шаг

Повторите 20 шаг для создания еще одного разделителя, либо вообще дублируйте его. Перенесите его, как показано ниже.

Теперь отрежем правую часть прямоугольника? Для этого выберите слой “tw_bg” и добавьте нему маску.

Создайте выделение по правому кончику нашего прямоугольника, который мы должны отрезать, выберите основным цветом черный #000000 и нажмите Shift + Backspace для заливки выделенной области в режиме маски.

29 Шаг

Напишите какой-нибудь текст, который, по сути, будет вашей цитатой из Твиттера. Параметры шрифта:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #222222

Для более качественного выравнивания выделите слой с текстом вместе с слоем с зеленой фоновой полосой и нажмите на кнопку Align Vertical Centers верхней панели.

30 Шаг

Повторите 27 шаг, чтобы получить нечто похожее на картинку ниже. Также создайте прямоугольник, который залейте цветом #334814 и снизьте его Opacity до 40%.

Большому прямоугольнику задайте следующие стили:

Затем залейте искаженный прямоугольник цветом чуть темнее — #2a6788.

Теперь нанесите букву “t” с такими параметрами шрифта:

  • Font Family: Pico-Black
  • Font size: 35px
  • Font weight: Regular
  • Anti-aliasing setting: Smooth
  • Color: #2fcfff

И задайте литере обвод при помощи Stroke.

Наведите порядок в слоях и сгруппируйте их как следует.

31 Шаг

Создайте очередную копию иконки Твиттера, смените ее Color Overlay (для большого прямоугольника) на #0080AB и залейте скошенный прямоугольник цветом #00526d.

Теперь напишем слово “in” с такими настройками:

  • Font Family: Myriad Pro
  • Font size: 35px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: white (#ffffff)

Создайте третью копию иконки Твиттера или LinkedIn и смените Color Overlay большого прямоугольника на #395796, а скошенный прямоугольник залейте цветом #263E6F.

Нанесите букву “f” со следующими параметрами для шрифта:

  • Font Family: Klavika
  • Font size: 35px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: white (#ffffff)

Сделаем последнюю копию иконки, сменим для большого прямоугольника Color Overlay на #E8E8E8, а скошенный зальем цветом #CDCDCD.

Теперь нанесите литеры “fr” с такими параметрами:

  • Font Family: Frutiger Black (скачайте его здесь)
  • Font size: 35px
  • Font weight: Bold
  • Anti-aliasing setting: Smooth
  • Color: f: #0079d2 — r: #ff3093

Каждую иконку поместите в отдельную группу и, выделив их все вместе, нажмите кнопку Distribute Left Edges на панели сверху.

32 Шаг

Продолжаем. Перейдем к левой части подвала. Создайте выделение размером 1020×460px и залейте его любым цветом на новом слое.

Применим теперь Gradient Overlay:

Должна получиться отличная тень!

При помощи Single Row Marquee Tool (M) создайте выделение шириной в 1px и залейте его белым #FFFFFF.

33 Шаг

В соответствии с иллюстрацией перетяните на холст две новых горизонтальных направляющих.

Шрифтом с нижеследующими настройками напишите заголовок:

  • Font Family: Rockwell
  • Font size: 30px
  • Font weight: Regular
  • Anti-aliasing setting: Sharp
  • Color: #7ea547

Подзаголовок наберите следующим шрифтом:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: None
  • Color: #d3d3d3

С помощью Line Tool (U) создайте две горизонтальных линии вплотную друг к другу, одну цветом #151515, вторую — #2F2F2F.

Выровняйте этот разделитель таким образом:

34 Шаг

В соответствии с иллюстрацией перетащите на холст еще две горизонтальных направляющих.

При помощи Rounded Rectangle Tool (U) создайте два прямоугольника размерами 210×25px и радиусом углов в 5px и залейте их цветом #141313. Затем задайте каждому стиль Inner Shadow.

В середине прямоугольников напишите какой-нибудь текст, используя такие настройки для шрифта:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: None
  • Color: #7ea547

Создайте еще один прямоугольник, как показано ниже, но задайте ему большую высоту — порядка 110px. Также напишите что-нибудь внутри него, используя те же настройки для шрифтов.

Сделайте копию кнопки, которую мы создавали на шаге 17 и выровняйте ее, как показано на картинке.

35 Шаг

Нанесите еще один заголовок, как мы делали это слева.

Руководствуясь иллюстрацией, нанесите еще несколько строк текста ниже.

Теперь сделайте две копии того, что получилось.

36 Шаг

Правую часть футера заполните так же по типу предыдущих двух.

Вот как должен выглядеть результат:

37 Шаг

Почти готово! Перетащите еще одну горизонтальную направляющую на расстоянии в 50px от предыдущей.

Создайте очередной разделитель в виде двух полосок шириной в 1px, одна из которых имеет цвет равный #181818, другая — #2F2F2F.

Теперь нанесите текст копирайта с такими настройками для шрифта:

  • Font Family: Arial
  • Font size: 15px
  • Font weight: Regular
  • Anti-aliasing setting: None
  • Color: white (#ffffff) — #82aa48

Тем же шрифтом наберите навигационные ссылки.

Организуйте свои слои по папкам, вот как это вышло у меня:

Заключение

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

В принципе, я попытался все изложить максимально доступным языком. Но, если вы столкнулись с проблемами — не стесняйтесь задавать свои вопросы в форме для отправки комментариев. Удачи!

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта psd.tutsplus.com, автор перевода указан в начале урока.