Дизайн сайта в photoshop

Опубликовано Окт 24, 2012 в Дизайн сайта, Создание сайтов | Нет комментариев

Дизайн сайта в photoshop

Создание дизайна сайта

В данной статье переведен, очень интересный, мануал  по созданию целевой страницы сайта-портфолио с дизайном в космическом стиле используя программу «Photoshop». Оригинал данного материала взят, с англоязычного сайта, по адресу: «http://psd.fanextra.com/tutorials/design-a-space-themed-portfolio-landing-page».

 

 

Дополнительные графические элементы

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

Источники дополнительных материалов, использованных  в этом уроке:

Космический фон: http://www.fotolia.com/id/24884030

Планета: http://www.fotolia.com/id/28136855

Web-элементы разделители: http://whttp://fanextra.com/1811/premium-web-element-simple-dividers

Набор круглых иконок социальных сетей: http://www.iconfinder.com/search/?q=iconset%3Acircular

Иконки для дизайна логотипа: http://www.iconfinder.com/icondetails/45593/128/design_graphic_letter_typography_typograpy_icon

Иконка для web дизайна: http://www.iconfinder.com/icondetails/44810/128/design_web_icon

Иконка для дизайн приложений: http://www.iconfinder.com/icondetails/23871/128/app_install_installer_icon

Финальный результат

Изображение дизайна сайта-портфолио, которое мы будем создавать:

Подготовка холста программы «Photoshop»

После запуска программы нужно выбрать пункт верхнего меню «файл», а затем «создать» или нажать сочетание клавиш «Ctr+N». В появившемся диалоговом окне укажите название проекта и шарину (1000px) с высотой (1600px).

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

Функционал программы «Photoshop» позволяет упростить данный процесс наличием возможности — установить вертикальные и горизонтальные направляющие.

Нам понадобятся  следующие направляющие:

По вертикали: 50 px, 100 px, 300 px, 500 px, 550 px, 700 px, 900 px, 950 px.

По горизонтаи: 175 px, 225 px, 450 px, 750 px, 900 px, 1100 px.

После добавления направляющих линий холст должен выглядеть как на изображении: 1

Выставленные горизонтальные и вертикальные линии

Изображение 1. Направляющие линии

Фон

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

Фон сайта

Данный фон можно разложить на три части:

  • Верхняя часть — это звездное небо с очертаниями планеты земля на темно синем фоне во всю ширину холста
  • Середина — темно синий фон
  • Низ сайта или футер — также звездное небо с очертаниями планеты земля на темно синем фон, но меньшего размера.

Из чего просматривается одинаковая составляющая — это  темно синий фон, поэтому на первом этапе разработки создаем новый слой с именем «background» (фон) и  установив для него цвет #050d25.

Верхняя часть фона сайта с дизайном на космическую тему.

Устанавливаем космическую текстуру

Верхняя часть фона состоит из нескольких графических графических элементов создающих эффект ночного, звездного неба для его создания нужно:

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

Уменьшив непрозрачность (opacity) слоя космической текстуры до 70% и приглушив резкую, нижнюю границу «космического слоя», для этого: добавляем ему маску слоя (layer mask)  и, выбрав мягкую, черную кисть (Brush Tool), растворите нижнюю часть звездного пространства на темном фоне нижнего слоя — мы создадим гармонично вписавшийся космос в фон будущего сайта.

 

 Устанавливаем изображение планеты

Устанавливаем изображение планеты, расположив его в самом верху холста.

Применив к этому слою маску (layer mask) и, выбрав мягкую, черную кисть (Brush Tool), растворить края картинки с планетой, мягко смешав их с основным фоном.

 

Дорабатываем фон для его большей привлекательности

Чтобы добавить фону, немного, привлекательности нужно нанести несколько неброских, цветных бликов для этого:

Создайте новый слой с именем «pink light» (розовый свет).

Взяв мягкую кисть (Brush Tool) большого размера и, выбрав  цвет #ee01f3, нанесите несколько «легких пятен» в области шапки макета.

После чего, изменив режим смешивания/наложения (blend mode) этого слоя на overlay (перекрытие) и уменьшив непрозрачность (opacity) до 20%, мы создадим очень тонкий, но все же заметный цветовой эффект.

Снова создаем новый слой с именем «purple light» (пурпурный свет) и тоже нанесите на нем несколько легких пятен такого #7a00f8 цвета, выбрав мягкую кисть большого размера.

Для смягчения цветового эффекта нужно:

  1. убавить непрозрачность слоя (opacity) до 15%
  2.  blend mode оставить в режиме normal (нормальный).

 

 

 Оформление фона в области подвала (футера).

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

Устанавливаем космическую текстуру в нижней части сайта

Для оформления нижней части, также, нужна текстура космоса, которую можно скопировать  и перенести дубликат вниз, в область подвала.

И снова нужно исправить шов на стыке слоев оригинала и копии текстуры, для этого нужно:

  1.  добавить, как и прежде, layer mask (маска слоя)
  2.  смешайте эту граничную зону с основным фоном, используя мягкую, черную кисть.

Фон нижней части сайта

Устанавливаем изображение планеты  в нижней части сайта

Расположение силуэта планеты в нижней части сайта будет, логическим, завершением оформления фона.

Сделать данное оформление, учитывая предыдущий опыт, достаточно, просто:

  1. скопируйте и перенесите дубликат в самый низ холста, расположив «полюс» по центру;
  2. уменьшить размер изображения планеты, так как это способствует  созданию визуальной иерархии в дизайне.

Готовый фон сайта можно посмотреть на изображении ниже:

Нижняя часть фона - планета

Фон сайта

Основная часть сайта.

Основная часть сайта расположена в прямоугольной области с закругленными углами и белым фоном, в которой расположены:

  • верхнее меню;
  • логотип сайта;
  • социальные иконки;
  • область контента;
  • форма e-mail подписки.

Подложка основной части сайта

Для создания основной области сайта нужно:

  1. на панели инструментов, выбрать rounded rectangle tool (прямоугольник со скругленными углами) установив радиус углов в 10px;
  2. привязываясь к направляющим, растяннуть на холсте прямоугольную, белую фигуру области контента.

Область контента со скругленными углами для основной части сайта

Верхнее меню сайта

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

Фон для меню

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

Растрировав слой копии фигуры, затем выбрав, на панели инструментов,  Rectangular Marquee Tool (Прямоугольная область) и, выделив всю площадь фигуры, за исключением верхней части высотой 50px, удалите ее.

Затем, открыв на этом слое вкладку blending options (параметры наложения) и выберав эффект inner shadow (внутренняя тень) и gradient overlay (наложение градиента) с указанными ниже настройками:

Inner Shadow (Внутренняя Тень):  

Blend Mode (Режим наложение): Normal (Обычный)
Color (Цвет): ffffff
Opacity (Непрозрачность): 100%
Angle (Угол): 90
Distance (Смещение): 1px
Choke(Стягивание): 0%
Size (Размер): 0px

Gradient Overlay (Наложение градиента):

Blend Mode (Режим наложение): Normal (Обычный)
Opacity (Непрозрачность): 100%
Gradient (Градиент): от (#5c1ba) к (#f4f4f4)
Style (Стиль): Linear (Линейный)
Angle (Угол): 90

Фон для вехнего меню сайта

Изображение с фоном для верхнего меню:

готовый фон для меню

Подсветка меню

Для большей привлекательности — центральную часть меню сделаем немного светлее создавая эффект подсветки.

Для этого:

  • Выделить фигуру панели меню, кликнув на ее миниатюре в палитре слоев с нажатой клавишей Ctrl.
  • Сохраняя выделенную область активной  — создать новый слой с названием «Подсветка меню».
  • Выберать Gradient Tool (Градиент) радиального типа «от белого к прозрачному» и залейте градиентом панель меню, протянув курсором воображаемую линию вниз от центра верхнего края фигуры. Поскольку выделение панели активно, градиентная заливка не выйдет за его пределы.

Меню с созданным эффектом свечения

  • Изменив режим наложения(blend mode) для слоя «menu highlight» на overlay (перекрытие) и уменьшите opacity (непрозрачность) до 30%.

Изображение меню с фоновой подсветкой и наложением непрозрачности

Пункты меню сайта

Меню современных сайтов сделано не только красивым, но и удобным с точки зрения юзабилительности, для этого —  вебмастера совместно с дизайнерами применяют различные техники при создания элементов дизайна:

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

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

Настройки текста для верхнего меню

Расположив текст в центре панели — добавим пункты меню сайта  со следующими параметрами текста:

Font Face (Гарнитура Шрифта): Proxima Nova
Styling (Начертание): Bold (Жирный)
Kerning (Межбуквенный интервал): -50
Color (Цвет): #5a5752

 

Настройка текста пунктов меню сайта

Чтобы сделать текст более выразительным и придать ему эффект слегка вдавленной надписи — добавим белую тень.

Сделав слой текста активным и вызвав, нажатием правой клавиши мышки (вкладка слои), контекстное меню ->параметры наложения — добавьте внутреннюю тень (drop shadow) с указанными ниже настройками:

Blend Mode (Режим смешивания/наложения): Normal (Нормальный)
Opacity (Непрозрачность): 80.
Color (Цвет): ffffff

Angle (Угол): 90
Distance (Смещение): 1px
Spread (Размах): 0%
Size (Размер): 2px

Настройка текста пунктов меню сайта

Активное состояние элемента меню

Для создания простого маркера активного состояния элемента меню добавьте новый слой с названием «menu active arrow» (стрела активного элемента меню).

На панели инструментов — включите инструмент выделения lasso tool (лассо) и под ссылкой «home» создайте контур маленькой стрелочки, указывающей вниз. Затем залейте стрелку нижним цветом градиента панели меню (#cac5be).

Активное состояние элемента меню

Создание серии разделителей между элементами меню.

Каждый разделитель должен состоять из двух, плотно пригнанных друг к другу, вертикальных линий (черной и белой) толщиной 1px.

Серия разделителей между элементами менюУменьшив непрозрачность (opacity) всех слоев разделителей до 10%, или, что проще, сгруппировав (Ctrl+G) все слои, а затем  уменьшая непрозрачность всей группы (папки) сразу  — серия разделителей, гармонично, впишется в дизайн.

итоговое изображение меню сайтаПонравилась статья? Поделись с друзьями!

Оставить комментарий

Ваш e-mail не будет опубликован.