Урок создания дизайна для сайта "магическая ночь"



Шаг 1.

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

Двигаемся дальше. Создайте новый документ с разрешением: 960x1000px RGB.Создайте новый слой и создайте несколько направляющих, чтобы распределить рабочее место. Дальше идем в Image > Canvas Size (Изображение > Размер холста) изменим размер документа, делая холст шире (1460x1000px). Таким способом Вы поставите свой дизайн в центр большого документа и увидите, как он выглядит на широком экране. Поставьте направляющие, обозначающие место для "шапки" заголовка.



Шаг 2.

Поставьте вертикальную направляющую в центре документа и используйте слой "Background" для темно-синей круговой заливки (Radial Gradient) с цветом переходящим от #OD2B53 к #010D1F. Я так же добавил несколько направляющих рядом с направляющими стоящими вертикально слева и с права.

Вполне возможно, что мы изменим высоту документа чуть позже, поэтому добавьте New Fill Layer (Новый слой заливки) с цветом #0101D1F ниже вашего слоя "Background".



Шаг 3.

В данном уроке мы будем использовать картинку Облаков в замен фильтру Clouds. Вставляем картинку и меняем Blending Mode (Режим наложения) на Overlay (Перекрытие). Затем идем в Layer > Layer Mask > Hide All (Слой > Маска Слоя > Спрятать Все) и рисуем круговую заливку (Radial Gradient) от черного к белому (#FFFFFF - #000000), которая идет по центру от самого верха до почти самого низа. Затем настроим Levels (Уровни) так, чтобы наши облака стали темнее.



Шаг 4.

Теперь находим, и вставляем картинку испанского побережья в новый слой, который называем "skyline". Затем создаем новый слой «Adjustment Layer» > Channel Mixer ( Настраиваемый Слой > Смешение каналов)... и выбираем Black & White with Blue Filter (RGB). Далее применяем этот эффект только к слою "skyline", помещаем слой с "Channel Mixer" над слоем "skyline", жмем на слое "Channel Mixer" правой кнопкой мыши и выбираем > Create Clipping Mask. И на конец меняем Blending Mode (Режим наложения) слоя "skyline" на Overlay (Перекрытие).



Шаг 5.

Примените Layer Mask > Reveal all (Маска слоя > Открыть все) к слою "skyline". Далее работаем в маске слоя, берем большую, черную, мягкую кисть, чтобы спрятать границы изображения. Затем выбираем Grunge brush ( Автор использовал эту кисть
Только пользователи группы VIP могут скачивать файлы с нашего сервера. Пожалуйста, пополните Ваш баланс на 15 DM
и в особенности кисти 250 и 181) и делаем границы более неровными.



Шаг 6.

Вставим текст "Magic" используя этот шрифт
Только пользователи группы VIP могут скачивать файлы с нашего сервера. Пожалуйста, пополните Ваш баланс на 15 DM
. Заходим в Layer Style (Стиль Слоя) и выставляем опции как показано ниже:
Outer Glow (Внешние свечение) #9EB6D0 и Gradient Overlay (Градиентное перекрытие) #70ABF6, #FFFFFF, #B4CBE7, #FFFFFF). Настал подходящий момент для распределения нашей работы по папкам. Поместим все наши слои в новую папку "Background", а текст в папку "Logo".



Шаг 7.

Добавим звезд к нашей работе. Вы можете использовать любые Star Brush, но я пользовался этими:
Только пользователи группы VIP могут скачивать файлы с нашего сервера. Пожалуйста, пополните Ваш баланс на 15 DM
. Возьмем кисть 550 из этого набора и нарисуем звезды белого цвета (#FFFFFF) на новом слое помещенного в папку с названием "Stars". Замечу что я разместил ярчайшую звезду над буквой "i" в слове Magic. Затем применил Gradient Overlay (Градиентное Перекрытие) используя три цвета #3A8FEF, #FFFFFF и #66C9FC к слою "Stars1", т.е. звезда над буквой "i" создается на новом слое.



Шаг 8.

Далее, используем кисть 615 из набора и добавляем больше звезд на небо в новом слое "Stars2". Затем мягкой резинкой стираем звезды перед зданием. Добавляем к слою "Stars2" Outer Glow (Внешние свечение) #8AB2FF.



Шаг 9.

Добавим больше звезд к слою "Stars2" по всему сайту. Далее, используя резинку, удаляем некоторые зоны со звездами. И на конец применим эффект Gradient Overlay (Градиентное перекрытие) используя четыре цвета: #6AB1D1, #FFFFFF, #94CFED, #FFFFFF.



Шаг 10.

Сейчас скачайте эти кисти:
Только пользователи группы VIP могут скачивать файлы с нашего сервера. Пожалуйста, пополните Ваш баланс на 15 DM
, и оставьте эту кисть рабочей, так как мы будем использовать ее несколько раз во время урока. Выберите кисть разрешением 65px (Я использовал кисть под номером 148) и нарисуйте белую звезду на новом слое прямо перед точкой буквы "i". Затем примените к слою Outer Glow (Внешнее свечение) #00BCF9 чтобы сделать звезду ярче.



Шаг 11.

Дублируйте слой с текстом "Magic", выберите инструмент Text и напечатайте слово "Night" стерев слово "Magic" с дублированного слоя. Дальше мы меняем цвета в Outer Glow (Внешнее свечение) на белый, а также цвета в Gradient Overlay (Градиентное перекрытие) #F9DA5B, #FEAE00, #FFD403.



Шаг 12.

А теперь добавим облака к нашей ночи. Скачайте эти кисти:
Только пользователи группы VIP могут скачивать файлы с нашего сервера. Пожалуйста, пополните Ваш баланс на 15 DM
. Выбираем кисть под номером 2464 и выставляем размер на 960px. Выставим первичный цвет #234B7F и на новом слое под названием "cloud1" нарисуем его. Чтобы держать все в порядке, я поместил слой с облаком в папку с таким же названием внутрь папки "Background". Теперь давайте немного сузим наше облако.



Шаг 13.

Используя инструменты Dodge и Burn (Осветление и Затемнение) сделаем пару штрихов на нашем облаке, чтобы оно смотрелось естественно. Обращу внимание что я осветлял облако сверху, а снизу его затемнял. Так же, чуть не забыл, изменим прозрачность слоя "cloud1" на 50% (Opacity).



Шаг 14.

Добавим еще облаков на новый слой "cloud2". Вы можете использовать любые облака, которые Вам нравятся, главное, используйте цвет как основной #5F83A5.
Осветляем и затемняем облако, таким же образом как и в Шаге 13. Только теперь немного осветляем низ, а верх затемняем, чтобы освещение казалось реальным.




Шаг 15.

Повторим предыдущий шаг. Но теперь возьмем другую кисть и цвет #36638C, и поместим перед слоем "cloud1". Изменим размер и применим инструмент Dodge и Burn (Осветление, Затемнение), если это необходимо.



Шаг 16.

Выбираем инструмент Eraser (Резинка) мягкий и стираем низ слоя "cloud1" для создания эффекта композиции.



Шаг 17.

Это самый важный шаг, мы добавим главную колонку, Вы должны помнить что мы делаем Веб сайт. Используя инструмент Rectangle (Прямоугольник) рисуем прямоугольник цветом #0A1D37 на новом слое и помещаем его ниже папки "Cloud". Замечу, что мой прямоугольник находится в границах направляющих. Далее выбираем слой с прямоугольником и идем Layer > Layer Mask > Reveal all (Слой > Маска слоя > Показать все) и рисуем градиент от белого к черному, который добавит красивый эффект к верху нашего прямоугольника. Наконец добавим направляющую немного ниже начала нашего прямоугольника, которая поможет нам при верстке.



Шаг 18.

Добавим еще один прямоугольник, но теперь это будет Sidebar. Опять помогаем себе при помощи направляющих и выбираем цвет #0915255. Так же применим и к этому слою Layer Mask (Маска слоя), так же как и в прошлом шаге.



Шаг 19.

На этом шаге у нас уже готов основной задний фон. Теперь, время добавить несколько деталей. Я помещу иконку RRS рядом с заголовком. Вставьте эту картинку (http://www.sxc.hu/photo/1116154) полной луны и назовите слой "moon-rss". Дальше настроим Hue/Saturation (Оттенок/Насыщение), чтобы сделать луну немного желтой, и добавим Inner and Outer Glow (Внутренние и Внешние свечение). Настройки смотрите ниже.



Шаг 20.

Добавляем маленькое облачко, цвета #7997B3, на новый слой, перед слоем с луной. Далее, используя мягкую резинку, удаляем некоторые части облака.



Шаг 21.

Добавим классические линии RSS (#DCA30B) на новый слой, который должен находится перед слоем с луной, но после слоя с облаком. Добавляем фильтры, показанные ниже. Так же добавляем звезду на слое с RSS, где-то над линиями RSS. Как это сделать, смотрим Шаг 10.



Шаг 22.

Вставляем эту картинку (http://www.sxc.hu/photo/1046048) на новый слой, это будет область для навигации по сайту. Эта картинка слишком короткая и скучная, поэтому мы ее удлиняем и трансформируем.



Шаг 23.

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



Шаг 24.

Чтобы визуально улучшить нашу навигацию по сайту, мы применяем след. эффекты слоя - Gradient Overlay (Градиентное перекрытие) цвета: #045F96 и #FBF4BD и Pattern Overlay.



Шаг 25.

Добавим эффект Drop Shadow (Отбросить тень) для нашей навигации. Вы можете использовать эффект слоя или сделать как я. Продублировать слой с навигацией и на дубликате сделать следующие: идем в Hue/Saturation (Оттенок/Насыщение) и меняем Lightening до -100, Blur (размыть) черную копию и немного искривить (Edit > Transform > Distor *Правка > Трансформировать > Искревить*).



Шаг 26.

И опять рисуем облако перед слоем с нашей навигацией. Затемняем, осветляем и удаляем, принцип описан в Шаге 15. Добавляем ссылки на страницы, используем шрифт Georgia - Italic. #0B1827 - для стандартных ссылок и #211808 - при наведении на ссылку. Добавим пару деталей, таких как: звезды на заднем плане и линии при наведении на ссылку.



Шаг 27.

В качестве нашей последней детали для слоя с навигацией - создадим новый слой перед слоем с навигацией и, используя обыкновенную кисть, нарисуем линии как будто это мазки акварели (смотрите скрин ниже). Повторите несколько раз, но выбирая другие цвета. И забыл, изменим Opacity (Прозрачность) на 40% на слое со звездами, которые мы рисовали для слоя с навигацией.



Шаг 28.

Добавим RSS текст. Я использовал шрифт Aria размером 10px и белый с желтым цвета (#FFFFFF, #F2C90D). Не забываем убирать режим Anti - aliasing, так как большинство браузеров не распознают текст с этой включенной функцией.



Шаг 29.

Новая деталь. Добавим эту картинку воздушного шара (http://www.sxc.hu/photo/171691). Вырежем шар из картинки и поместим в нашу работу, где-нибудь ниже логотипа. Добавляем эффект слоя Color Overlay (Цветовое перекрытие) цвет: #1F416E, Blending Mode: Overlay (Режим наложения: Перекрытие), чтобы цвета совпадали по гамме с остальной работой. Вы можете немного осветлить шар. Это уже на ваше усмотрение.



Шаг 30.

Используя кисть со звездами, добавляем поле звезд (смотрим шаг 8) перед шаром и нашей навигацией. Я еще добавил линию идущую от воздушного шара, нарисовав ее при помощи стандартной жесткой кисти размером 3px. Опять же, резинкой затираем некоторые части со звездами.



Шаг 31.

А теперь, время добавить посты. Добавляем заголовок и линию даты на новом слое под названием "Post". Как сделать, смотрим скрины. Так же я добавил звезду перед линией с датой.



Шаг 32.

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

Теперь добавим тэг линию ниже поста и нарисуем небольшую звезду в конце тэг линии. Вы можете нарисовать поле звезд под слоем с постом. Под конец нарисуем разделительную линию цвета #1D324F используя Line Tool (Линия).

Можно добавить еще постов, просто продублируя папку "Post". Вам скорее всего не хватит места, чтобы его увеличить повторяем увеличение холста из Шага 1, но изменяем только длину холста.



Шаг 33.

Поработаем над нашим Sidebar. Добавим форму поиска. Создадим еще одну папку и назовем ее "Search". Рисуем облако внутри новой папки, затемняем и осветляем облако, чтобы оно выглядело как на картинке ниже. Далее используя Rounded Rectangle Tool (Прямоугольник с закругленными углами), нарисуем прямоугольник поверх облака. Добавим Inside Stroke эффект (Внутренняя обводка)цвета: #697372 шириной линии в 1px для треугольника и изменим Fill (заливка) на 50%.



Шаг 34.

Рисуем звезды перед облаком используя любую кисть со звездным полем. Запомните, удаляем все выделяющие звезды. Далее дублируем, уменьшаем и Edit > Flip horizontal (Правка > Повернуть по горизонтали) слой с воздушным шаром (Шаг 29). Помещаем его внутрь папки "Search". Добавляем текст, используя шрифт Georgia Italic и приятный желтый цвет (#D5A934). Далее добавляем инструкцию по поиску и кнопку "Go!". Вы можете посмотреть все величины на скринах ниже. В качестве конечного штриха, нарисуем одиночную звезду, над словом Search.

Шаг 35.

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



Шаг 36.

Мы дошли до конца. Приукрасим наш Sidebar. Для этого создадим эффект затухания в конце bgnew, просто выбрав черную мягкую кисть и закрасив дно на маске слоя. Добавляем пару облаков, далее затемняем и осветляем их. Убедитесь что облака не выходят за пределы bgnew и соответствуют концепции нашего общего дизайна. Опять рисуем поле со звездами позади облака и дублируем слой с воздушным шаром. ВНИМАНИЕ! Все это я сохранил в папку под названием "Sidebar Footer".



Шаг 37.

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



Шаг 38.

Затемняем яркие облака. Далее, рисуем поле белых звезд используя кисть 615. Дорисуем еще поле с более яркими звездами используя другую кисть, из этого набора 656. Затем удалим ненужные участки со звездами используя мягкую резинку.






Я очень надеюсь, что урок был полезным для Вас!
Всегда рады почитать Ваши комментарии по уроку! Спасибо SegaFreelovin за перевод урока.


Авторы Кистей: kelzky13, bl1nx, jen-ni, redheadstock
Оригинал урока: http://psd.tutsplus.com/
Автор урока - Alvaro Guzman

Перевод урока - SegaFreelovin, специально для 2dtutorials.ru

Если наш сайт был полезен Вам, НЕ ПОЛЕНИТЕСЬ, нажмите на любую из кнопок ниже, для того, чтобы поделиться с другими людьми полезной ссылкой!
Нравится
!!! Спасибо !!!


Эта новость называется - Урок создания дизайна для сайта "магическая ночь". Не забудьте добавить в закладки, чтобы не потерять.


Распечатать
1

продолжай в таком хорошем стиле дальше
9 апреля 2009 00:41
2

делай побольше таких постов
11 апреля 2009 15:16
3

Кто-нибудь пробовал делать урок? Перевод как?

З.Ы. На следующей неделе появится куча свободного времени. Сделаю еще один перевод очень красивого урока! ЖДИТЕ. Всем понравится ;)
12 апреля 2009 19:38
4

очень здорово, научиться бы еще всему этому по быстрее))))))))
23 мая 2009 21:36

N.K
5

Спасибо за урок, перевод хороший. Вот что получилось: http://pic.ipicture.ru/uploads/090716/1TyjJUqR1a.jpg
16 июля 2009 15:47
6

Да,урок классный...
N.K тоже хорошо получилось
17 октября 2009 21:28

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости. Только для зарегистрированных пользователей
теги 2дтуториалс
фотошоп скачать клипарт Кисти шрифтов коллекция скачать иконки набор Обои для рабочего стола иконок Тонкости и секреты Часть шаблоны Новогодние фоторамки разные шаблоны исходники фотошопа кистей Wallpapers текстуры Иконки стилей Стили для фотошоп обоев Подборка скачать обои стиле текстур Скачать текстуры бесплатно текстуры для фотошоп Рамки для фотографий psd исходники фотошоп Клипарт скачать clipart бесплатно бекграундов фоторамок скачать иконки для windows Кисти для фотошопа скачать кисти фотошоп
{slin}
2дтуториалс.ру - проект компании ООО "Российские Интернет Технологии", 2011г.
Офис расположен по адресу - Россия, г. Москва, ул. Обуховской обороны, д. 12, оф.5.

счетчик рамблер   Рейтинг SIMPLETOP.NET   [Valid RSS]   Здесь находится аттестат нашего WM идентификатора 194801541119