Веб-дизайн: дизайн ночного волшебства

взято с · Алексей Деревянко · «Мир Фотошопа»

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

Вступление

Последние несколько дней я искал вдохновение в знаменитых старых картинах и задержался на Ван Гоговской «Звездной ночи». В это время я подумал: “Интересно, можно ли перенести такую идею в веб дизайн??” И в результате понял, что да! После нескольких часов работы я был готов предоставить вам полноценный урок по веб дизайну, по мотивам «Звездной ночи» Ван Гога. Приступим?

1 Шаг

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

Ну что ж, за работу! Создайте новый документ размерами 960×1000px в режиме RGB. Перетащите на края по одной направляющей для обозначения размеров, а затем увеличьте документ, изменив параметры в Image > Canvas Size на 1460×1000px. Так вы создали рамки, в которых будете работать, и сможете наблюдать, как будет выглядеть результат при больших разрешениях. Еще нанесите горизонтальную направляющую для отделения шапки по высоте.

2 Шаг

Нанесите по центру документа еще одну вертикальную направляющую и залейте фоновый слой темным синим радиальным градиентом цветов от #0D2B53 к #010D1F. Еще я обычно добавляю пару направляющих по краям шаблона для маркировки отступов слева и справа соответственно. Также очень возможно, что нам придется изменить высоту документа в процессе работы, поэтому добавьте новый Fill Layer с цветом #010D1F (Layer > New Fill Layer > Solid Color).

3 Шаг

Вместо того чтобы использовать фильтр Clouds для создания фона мы поработаем с реальной фотографией. Перенесите вот эту картинку на новый слой под названием “Clouds” и смените его режим наложения на Overlay. Затем выполните Layer > Layer Mask > Hide All и растяните радиальный градиент цветом от белого к черному, идущий от середины сверху почти к самому низу. Затем подстройте Levels для этого слоя, сделав его чуть темнее.

4 Шаг

Теперь поместим вот такую симпатичную картинку одного из мест в Испании на новый слой с названием “Skyline”. После этого создайте новый корректирующий слой Adjustment Layer > Channel Mixer и выберите предустановленный пункт Black & White with Blue Filter (RGB). Затем для применения эффекта нужно удерживая нажатой клавишу Alt кликнуть по линии, разделяющей слои Channel Mixer и “Skyline”. В итоге смените режим наложения слоя “Skyline” на Overlay.

5 Шаг

Теперь примените маску для слоя “Skyline”: Layer Mask > Reveal All и при помощи большой мягкой черной кисти спрячьте края изображения. После этого выберите какую-нибудь гранджевую кисть (я использовал кисти Kelzky13, особенно мне нравятся номера 250 и 181 из этого сета) и сделайте границы более хаотичными.

6 Шаг

Сейчас создайте надпись «Magic» используя шрифт Scriptina. Затем примените к этому слою стили, показанные ниже (Outer Glow #9EB6D0; Gradient Overlay #70ABF6, #FFFFFF, #B4CBE7, #FFFFFF). Также сейчас самое время организовать наш рабочий стек по папкам. Поместите все слои, за исключением текста в папку под названием “Background”, а для текста «Magic» создайте группу “Logo”.

7 Шаг

Теперь добавим в наш дизайн несколько звезд. Можете использовать для этого совершенно любые наборы кистей, я использовал сет Star field brushes от BL1nX. Возьмите кисть под номером 550 из этого сета и нарисуйте звезды белого цвета на новом слое в группе под названием “Stars”. Заметьте, что самую яркую звезду я поместил поверх точки в букве “i”. Сейчас примените к этому слою (“Stars1”) стиль Gradient Overlay используя три цвета: #3A8FEF, #FFFFFF и #66C9FC.

8 Шаг

Далее, используя кисть номер 615 из звездного сета, добавьте еще больше звезд на небо на очередном слое (“Stars2”), убирая ластиком лишнее, что попадает поверх зданий. Добавьте к этому слою стиль Outer Glow с цветом #8AB2FF.

9 Шаг

Нанесите еще больше звезд на слой “Stars2, а затем при помощи ластика уберите некоторые области этого слоя. В конце концов, примените к слою стиль Gradient Overlay с цветами #6AB1D1, #FFFFFF, #94CFED, и #FFFFFF.

10 Шаг

Теперь скачайте набор кистей Star Brushes от Jen-ni и с этого момента держите их под рукой, потому что их мы будем использовать несколько раз в этом уроке. Выберите кисть номер 148 размером 65px и поставьте белую звездочку на новом слое поверх точки в букве “i”. Затем примените стиль Outer Glow к звезде цветом #00BCF9, чтобы сделать ее ярче.

11 Шаг

Продублируйте текст “Magic”, перейдите на этот дубль и напишите на его месте слово “Night”. После этого установите стиль Outer Glow в белый (#FFFFFF), а Gradient Overlay поменяйте на такие цвета: #F9DA5B, #FEAE00 и #FFD403. Руководствуйтесь приведенными ниже иллюстрациями.

12 Шаг

Теперь добавим облаков. Скачайте набор кистей Redheadstock’s Clouds II. Далее выберите кисть номер 2464 и задайте ей размер в 960px (перекрывая основную ширину макета). Установите цвет #234B7F и нанесите кистью одно облако на новый слой “Cloud1”. Для того чтобы сохранять порядок в структуре документа, я поместил облако в отдельную папку внутри папки “Background”. Теперь немного вытяните “Cloud1” по вертикали.

13 Шаг

Следуя дальше, поработаем с Dodge и Burn. Как видите, я немного подсвечивал части облака вблизи лого и затемнил нижнюю его часть. Также смените непрозрачность (Opacity) слоя “Cloud1” на 50%.

14 Шаг

Добавьте еще одно облако на новом слое “Cloud2”. Вы можете выбрать облако любой формы по вашему вкусу, но задайте ему цвет #5F83A5. Немного затемните нижнюю часть облака при помощи Dodge Tool, чтобы показать игру света.

15 Шаг

Повторите предыдущий шаг, используя другую кисть, но на этот раз возьмите цвет #36638C и поместите облачко поверх “Cloud1” на новом слое. Подкорректируйте его размеры, поработайте Dodge или Burn по необходимости.

16 Шаг

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

17 Шаг

Пришло время решающего момента — будем создавать фон для блока главного контейнера (никогда не забываем, что делаем дизайн для веб). С помощью Rectangle Tool нарисуйте векторный прямоугольник цветом #0A1D37 на новом слое поверх папки “Clouds”. Заметьте, что мой прямоугольник проведен по направляющим горизонтального отступа. После этого выберите этот слой с прямоугольником и выполните Layer > Layer Mask > Reveal All и растяните по созданной маске градиент от белого к черному, чтобы создать эффект перетекания в верхней части блока. В конце отметьте одной направляющей границу, на которой заканчивается градиент и начинается ровная заливка цветом.

18 Шаг

Далее добавим еще один прямоугольник, но на этот раз — для бокового блока. Руководствуйтесь направляющими, цвет пусть будет #091525. Далее к новому прямоугольнику примените маску по примеру предыдущего шага.

19 Шаг

На данный момент у нас готова основа фона для шапки. Пришло время добавить некоторые детали. Сейчас мы будем создавать уникализированную иконку RSS. Сохраните вот это изображение Луны и вставьте его в свой документ на новом слое под названием “Moon-Rss”. Затем сделайте вашу Луну более желтой, подстроив нужным образом значения Hue / Saturation, а также добавьте свечения (оба стиля Inner и Outer Glow), руководствуясь приведенными ниже рисунками.

20 Шаг

Добавьте небольшое пятно с облаками цвета #7997B3 на новом слое поверх слоя с Луной. Затем при помощи большого мягкого ластика удалите некоторые части облака.

21 Шаг

Теперь добавьте поверх вашей Луны иконку RSS, однако ее нужно поместить под созданное вами облачко на предыдущем шаге. После этого примените к иконке стили, как показано ниже (Gradient Overlay, Outer Glow и Drop Shadow). В конце концов, поместите на нее какую-нибудь звездочку (как в шаге 10).

22 Шаг

Вставьте на новый слой вот такую картинку — будем использовать ее, для навигационного меню нашего сайта. Из-за того, что оригинальное изображение для наших задач — немного сжатое, нужно его растянуть. Для этого я использовал несколько приемов: разрезание с вставкой части изображения, а также Free Transform. После этого я применил небольшое искривление (при помощи Warp Tool — Flag Warp).

23 Шаг

Усильте тени на этом свитке при помощи Dodge Tool.

24 Шаг

Для придания текстуры свитку примените к нему стиль Gradient Overlay (#045F96, #FBF4BD) и Pattern Overlay.

25 Шаг

Теперь добавьте стиль Drop Shadow для него же. Вы можете применить либо Drop Shadow, либо поступить так, как это делал я. Продублируйте этот слой, затем при помощи Hue / Saturation понизьте Lightening до -100, размойте черную копию при помощи Gaussian Blur и трансформируйте ее, применив Free Transform для придания ей неправильной формы.

26 Шаг

Теперь поверх свитка добавьте очередное облачко. Проделайте с ним все то же самое, что и в шаге 15 (Dodge, Burn, Delete). После этого добавьте названия ссылок в меню шрифтом Georgia Italic. Используйте цвет шрифта #0B1827 для стандартных ссылок и цвет #211808 — для подсветки ссылки. Также добавьте некоторые детали (например, звезды на заднем плане, или подчеркивание для подсветки). Структуру слоев можно увидеть на рисунке ниже.

27 Шаг

В качестве последнего штриха для панели навигации, создайте новый слой поверх вашего свитка и с помощью какой-нибудь гранджевой кисточки сделайте по одному мазку под каждой ссылкой разных цветов. Понизьте также Opacity слоя со звездами “Stars” до 40%.

28 Шаг

Добавьте аннотацию к RSS. Я использовал шрифт Aria размером 10px желтого (#F2C90D) и белого цветов. Не забудьте установить сглаживание на None, потому как большая часть браузеров отображает текст без сглаживания (за исключением IE7 и Safari).

29 Шаг

В качестве приятной детали добавьте в шапку вот такое изображение с симпатичным воздушным шариком и поместите его в область под логотипом. Примените к нему стиль Color Overlay (#1F416E, режим смешения — Overlay) для подстройки по цвету к шапке. Также вы можете чуть затемнить левую сторону шара при помощи Burn Tool.

30 Шаг

Сейчас при помощи кисти номер 615 из сета Star Field Brushes (смотрим шаг 8) добавьте звезды рядом с шаром и поверх свитка меню. Я также добавил нитку к шарику, используя кисть толщиной в 3px. Пользуйтесь также ластиком, для понижения яркости звезд в некоторых местах.

31 Шаг

Время добавить запись. Сначала добавьте заголовок и поле метаданных на новый слой под названием “Post”. Смотрим на иллюстрацию ниже — показаны параметры шрифтов. Также я добавил небольшую звезду рядом с полем метаданных в качестве визуального аттрактора.

32 Шаг

Давайте теперь наполним папку “Post” — на главной странице должно выводиться несколько постов. Добавьте картинку с превью в левую часть поста (размеры 200×200px и Stroke в 1px) и аннотацию справа от нее. Также нам нужно добавить счетчик комментариев, оставленных к записи справа в верхней части. Для поля комментариев создайте новую папку “Comments” и создайте в ней легкий фон с маленьким облачком и звездами. Вам просто необходимо повторить некоторые шаги, на которых мы создавали все то же самое для шапки, но в меньших масштабах. После этого добавьте какую-нибудь цифру с числом комментариев и слово “Comments” под ним.

Далее добавьте линию тегов под записью и небольшую звезду справа от нее. Звезду можете рисовать даже на фоне для самой записи, если вам так будет удобно. В конце концов, нарисуйте разделитель (#1D324F) для записей, используя Line Tool.

Теперь продублируйте папку “Post” и отредактируйте копии слоев так, чтобы получить две разных записи. Очень возможно, что вам понадобится изменить высоту документа к этому моменту — просто вызовите меню Image > Canvas size, как в шаге 1. Когда разберетесь с размерами рабочей области, увеличьте также размеры фонов для главного блока и бокового (сайдбара).

33 Шаг

Теперь займемся сайдбаром. Сначала добавим форму поиска. Создайте новую папку с названием “Sidebar” и внутри нее — еще одну, названную “Search”. Здесь нарисуйте облачко и поработайте над ним с помощью Dodge и Blur, чтобы сделать его похожим на рисунок ниже. Затем при помощи Rounded Rectangle Tool нарисуйте поверх облака прямоугольник. Примените к нему стиль Stroke величиной в 1px и цветом #697372, а также смените его значение Fill до 50% (самого прямоугольника).

34 Шаг

Поверх слоя с облачком добавьте звездной пыли, не забывайте стирать лишни участки с звездами. После этого продублируйте, уменьшите и отобразите по горизонтали (Edit > Flip Horizontal) воздушный шар из шага 29. Поместите его в папку “Search”. Также добавьте аккуратную надпись симпатичного желтого цвета (#D5A934). После этого добавьте инструкции по поиску и нарисуйте кнопку “Go!”. Все параметры шрифтов вы можете видеть ниже на иллюстрациях. В качестве завершающей детали нарисуйте яркую звезду за текстом.

35 Шаг

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

36 Шаг

Что ж, мы подходим к концу. Оформим сайдбару футер (подвал). Для начала немного растворите нижнюю часть сайдбара, закрасив ее мягкой кистью в режиме маски. После этого нарисуйте там несколько облаков, а затем придайте им объема, поработав инструментами Dodge и Burn. Убедитесь, что облака не вторгаются в область главного блока и аккуратно вписываются в сайдбар по ширине. Затем снова добавьте звездное поле позади облаков и на его фоне еще раз нанесите продублированный воздушный шар. При создании футера для бокового блока я работал в папке “Sidebar Footer”.

37 Шаг

Создадим основной футер. Для начала сведите на нет нижнюю часть фона основного раздела при помощи большой мягкой кисти в режиме маски. Затем нанесите облака на соответствующую часть внизу страницы вашего макета. Я комбинировал большие темно-синие облака (#0B1C38) с маленькими голубыми (#223E63), как вы можете видеть из иллюстрации ниже. Не забывайте, что облака должны быть частью фонового изображения, поэтому не выходите за рамки направляющей, разделяющей основной блок и подвал. К тому же помещайте все рабочие слои в соответствующую для подвала папку — “Footer”.

38 Шаг

Осветлите маленькие облака при помощи Burn. Затем рассейте по ним звезды кистью 615 из звездного набора. Далее нанесите звезды еще большей яркости (я использовал для этого кисть номер 656). В итоге удалите лишние области звезд при помощи большого мягкого ластика.

Заключение

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