Сайт адаптирован под браузеры Opera и Mozilla Firefox. Во всех остальных браузерах этот сайт может показываться не коректно. Приносим свои извинения за неудобства.
Урок веб-разработчика и графического дизайнера из Боливии Alvaro Guzman. Автор искал вдохновение, просматривая работы знаменитых старых живописцев. И остановившись на "Звездная ночь" Ван Гога подумал: Смогу ли я использовать это в веб проекте? И ответ был - Да! Затем последовало несколько часов работы…
Шаг 1 Начнем создавать наш проект! В первую очередь замечу, что это не базовый урок для начинающих, потому я пропущу некоторые объяснения. Урок рассчитан на средний уровень владения редактором Photoshop. Во-вторых, действительно трудно повторить точно пример, которого добился я, и вы должны использовать свое воображение и вкус, чтобы получить что-нибудь подобное или лучше, чем мой проект. И третье, этот проект был разработан для Wordpress, но вы можете подогнать под другую платформу или даже использовать для веб-сайта.
Архив Изображений для урока можете скачать здесь: Скачивание с нашего сервера доступно только зарегистрированным пользователям
Архив Кистей для урока можете скачать здесь: Скачивание с нашего сервера доступно только зарегистрированным пользователям
Идем дальше! Создаем новый документ 960 х 1000 пикселей, RGB. Установим несколько направляющих, чтобы разметить границы и идем Image > Canvas Size (Изображение > Размер Холста), чтобы изменить размер документа, увеличив ширину (1460 x 1000 px). Таким образом, вы будете иметь свой проект внутри большего документа, и посмотреть, как это будет выглядеть для широкоформатных мониторов. Также, устанавливаем направляющие, чтобы отметить вертикальные границы.
Шаг 2 Установим вертикальную направляющую посередине документа и используем её для заливки фона на слое "Background" темно-синим радиальным градиентом (#0D2B53 - #010D1F). Я добавил еще несколько направляющих слева и справа для границ дополнения к главной странице. Очень возможно, что мы позже изменим высоту документа, так что добавим New Fill Layer (Новый Слой-заливку) (#010D1F) ниже слоя "Background".
Шаг 3 Один из читателей PSDTUTS предложил использовать изображения облаков вместо классического фильтра Облака, так мы и поступим. Вставляем это изображение грозовых туч (файл в архиве «Изображения для урока») на новом слое, называем "Облака" и меняем Blending Mode (режим смешивания) слоя на Overlay (Перекрытие). Затем идем Layer > Layer Mask > Hide all (Слой > Маска Слоя > Скрыть все) и тянем Радиальный Градиент бело-черный (#FFFFFF - #000000), который идет по средней направляющей от верхней точки вниз. После чего регулируем Уровни слоя "Облака", чтобы сделать облака темнее.
Шаг 4 Сейчас добавим в проект другое изображение - испанского побережья, называем слой "Горизонт". Затем создаем new Adjustment Layer > Channel Mixer... (Новый Слой-заливку > Микшер Каналов) и выбираем Black & White with Blue Filter (RGB) (Черно/Белый с Синим Фильтром (RGB)). Чтобы применить эффект только к слою "горизонт" в палитре слоев, удерживая Alt, щелкаем между слоями «микшер каналов» и "горизонт". Меняем Blending Mode слоя "горизонт" на Overlay.
Шаг 5 Применим Layer Mask > Reveal all к слою "горизонт". Используя большую мягкую кисть и черный цвет (#000000), маскируем границы изображения, затем выбираем Grunge кисть (я использовал Grunge кисти от Kelzky13, в наборе 250 и 181) (NS: кисти в архиве «Кисти») и продолжаем маскировать края.
Шаг 6 Далее инструментом type печатаем слово "Magic", используя шрифт Scriptina. Затем применяем стили слоев, показанные ниже: Внешнее свечение (#9EB6D0) и Перекрытие Градиентом (#70ABF6, #FFFFFF, #B4CBE7, в #FFFFFF). И сейчас самое время сгруппировать слои и разместить их в папках. Помещаем все слои в новую папку, называем ее " Background", а слой с текстом поместим в другую папку " Logo".
Шаг 7 Сейчас мы добавим немного звезд, вы можете использовать любые звездные кисти, но я использовал набор: blinxspacebrushes1.abr от BL1nX. Используя кисть 550 из набора, рисуем звезды белым цветом (#FFFFFF) на новом слое внутри новой папки, названной "Звезды". Заметьте, что я помещаю самую яркую звезду над точкой буквы i. Затем применяем к слою "Stars1" стиль слоя Перекрытие Градиентом, используя три цвета (#3A8FEF, #FFFFFF, и #66C9FC).
Шаг 8 Используя кисть 615 из того же звездного набора, добавляем на новом слое больше звезд небу, называем слой "Stars2". Мягким Ластиком удаляем звезды на зданиях и постройках. Добавляем слою "Stars2" стиль слоя Внешнее свечение (#8AB2FF).
Шаг 9 Добавляем еще больше звезд на слое "Stars 2", затем, используя Ластик, стираем некоторые области звезд. Затем применим этому слою стиль Перекрытие Градиентом, используя четыре цвета: #6AB1D1, #FFFFFF, #94CFED и #FFFFFF.
Шаг 10 Сейчас будем использовать кисти Star Brushes от jen-ni. Выбираем кисть и устанавливаем диаметр 65 px (я использовал кисть номер 148), рисуем белую (#FFFFFF) звезду на новом слое над точкой в букве i. Затем применяем Внешнее сечение (#00BCF9) для слоя звезды, чтобы сделать ее ярче.
Шаг 11 Дублируем слой с текстом "Magic", выделяем слово и печатаем вместо него другое "Night". Затем устанавливаем Внешнее свечение на белый цвет (#FFFFFF) и Перекрытие Градиентом с тремя цветам (#F9DA5B, #FEAE00 и #FFD403):
Шаг 12 Давайте добавим нашей ночи немного облаков! Загружаем кисти с облаками от redheadstock. Затем выбираем кисть номер 2464 и устанавливаем диаметр 960px (что соответствует главной ширине проекта). Устанавливаем цвет foreground #234B7F и рисуем одно облако на новом слое "Cloud1". Чтобы поддерживать порядок в палитре слоев я помещаю слой облака в отдельную папку внутри папки "Background". Изменим немного размер облака "cloud1" по высоте.
Шаг 13 Инструментами Dodge и Burn обработаем немного облако. Заметьте, что область рядом с Лого я осветляю, в низ облака делаю темнее. Изменим непрозрачность слоя "cloud1" до 50%.
Шаг 14 Добавляем еще одно облако на новом слое "Cloud2". Вы можете использовать любое облако, но цвет переднего плана установите #5F83A5. Низ этого облака сделайте немного светлее, чтобы оно лучше соответствовало освещению.
Шаг 15 Повторяем предыдущий шаг, но теперь используя другие кисть и цвет: #36638C. Размещаем этот слой выше слоя "cloud1." Изменим размер, и также обработаем области инструментами Dodge и/или Burn.
Шаг 16 Выберите большой мягкий Ластик и сотрите низ слоя "cloud1", чтобы создать исчезающий эффект.
Шаг 17 Это важный шаг, мы добавим главный контентный фон, вы не должны забывать, что проектируете для web. Используя инструмент Rectangle tool (Прямоугольник), тянем векторный прямоугольник (#0A1D37) на новом слое ниже папки " Clouds ". Заметьте, что мой прямоугольник внутри дополнительных направляющих. Затем выбираем слой прямоугольника и идем Layer > Layer Mask > Reveal all... и тянем бело/черный градиент, который добавит интересный эффект вверху прямоугольника. Наконец, добавим направляющую на границе исчезающего эффекта в прямоугольнике, которая поможет нам, когда мы будем переводить этот проект в HTML + CSS. Напоминанию, что от направляющей вниз цвет фона должен быть однотонным.
Шаг 18 Добавляем другой прямоугольник, но теперь для фона Sidebar, снова устанавливаем направляющую и используем цвет #091525. Затем, применяем к слою нового прямоугольника как в предыдущем шаге - Маску Слоя и градиент.
Шаг 19 На этот момент мы имеем готовый фон хедера. Сейчас настало время добавить несколько деталей. Для шапки сайта я добавил RSS иконку. Копируем изображение с луной (файл в архиве) и вставляем его в проект на новом слое "moon-rss". Затем регулируем Hue / Saturation (Оттенок / Насыщенность), чтобы сделать луну немного желтее, и добавляем слою Внутреннее и Внешнее свечение (значения показаны ниже).
Шаг 20 Добавьте небольшое облачко цветом #7997B3 на новом слое выше слоя луны в палитре слоев. Затем, используя большой мягкий ластик, стираем некоторые области нового облака.
Шаг 21 Добавьте классическую RSS фигуру (#DCA30B) на новом слое выше слоя "луна", но ниже слоя "облачко". Затем, применяем к этому слою стили, показанные ниже (Перекрытие Градиентом, Внешнее свечение и Тень). Наконец, добавьте звезду где угодно над RSS фигурой (посмотрите Шаг 10).
Шаг 22 Вставляем следующее изображение на новом слое, мы будем использовать его в качестве фона главного навигационного бара. Сделаем исходное изображение немного шире, для этого выделяем и копируем участок свитка и перемещаем копию в сторону, используя Move (Free Transform) tool. Затем немного деформируем свиток, используя Flag warp.
Шаг 23 Чтобы усилить иллюзию искривления сделаем некоторые области свитка темнее.
Шаг 24 Чтобы улучшить текстуру свитка, применяем Перекрытие Градиентом (#045F96 и #FBF4BD) и Перекрытие Узором.
Шаг 25 Добавим Тень от свитка. Вы можете использовать Drop Shadow или сделать как я: дублируем слой свитка и в Hue / Saturation устанавливаем Lightening на -100, блюрим черную копию и искажаем ее инструментом Free Transform.
Шаг 26 Добавим облако над свитком, применим инструменты Dodge и Burn, и как в шаге 15 сотрем часть облака. Затем добавляем текст Pages link's (имена страниц), используя шрифт Georgia - Italic. Используем цвет #0B1827 для стандартного линка и цвет #211808 для активного линка, когда на ссылку наезжает курсор мышки. Еще добавим несколько дополнительных деталей: звезды на фоне и линию для активного эффекта. Внизу вы можете видеть порядок расположения слоев в палитре слоев для этого изображения.
Шаг 27 И теперь заключительная деталь в баре навигации страниц - создаем новый слой выше слоя свитка и, используя кисть particles, рисуем мазок акварельной кисти (посмотрите изображение ниже). Сделайте это несколько раз, но используйте разные цвета. Затем уменьшаем Непрозрачность слоя "звезды" (навигационного бара) до 40%.
Шаг 28 Добавьте текст RSS related. Я использовал шрифт 10 px Aria, цвета желтый (#F2C90D) и белый (#FFFFFF). Не забудьте установить метод сглаживания шрифта - без сглаживания (Anti-aliasing Method to None).
Шаг 29 Добавим еще одну дополнительную деталь - изображение воздушного шара. Вырезаем воздушный шар из фона и размещаем его на новом слое где угодно ниже лого, добавляем стиль слоя Перекрытие Цветом (#1F416E – режим смешивая : Перекрытие). Также вы можете применить инструмент Burn с левой стороны воздушного шара.
Шаг 30 Используя кисть 615 из набора star field (посмотрите шаг 8), добавляем звезды выше воздушного шара и свитка. Еще я добавил воздушному шару линию белого цвета в 3 px и немного изогнул ее. Используя Ластик, сотрем немного звезд.
Шаг 31 Настало время добавить пост. Для начала, добавьте заглавие новости и строку даты на новом слое, названном "Post". На скриншоте ниже показаны опции шрифта. Еще я добавил маленькую звездочку рядом с датой, как визуальную деталь.
Шаг 32 Добавим больше информации в папке "Post", так как на главной странице будет возможность предварительного просмотра. Добавим слева превью изображения (200x200 px с эффектом Stroke (Обводка) в 1px) и краткий текст справа. Добавим справа вверху превью количества комментариев поста. Для поля комментариев создайте новую папку "Comments" и добавьте очень небольшой фон с маленьким облаком и несколькими маленькими звездами. Теперь мы в основном только повторяем действия предыдущих шагов, когда мы проектировали шапку. Затем добавляем номер и слово Comments ниже. Теперь добавляем строку Tags ниже поста, и маленькую звездочку с правой стороны этой линии. Добавьте небольшое звездное поле, как для фона поста, если хотите. Наконец тянем окошко (#1D324F) для поста, используя инструмент Line Tool (Линия). Затем дублируем папку "Post" и редактируем копию, чтобы создать две или три различные новости. Очень возможно, что высоту вашего документа нужно будет увеличить, только делать это надо, используя инструмент Crop tool или Image > Canvas size (Изображение > Размер холста) подобно действиям шага 1. Если вы изменили размер своего главного документа, увеличиваем высоту и главного фона и фона сайтбара.
Шаг 33 Давайте сейчас работать над сайт баром. Мы собираемся добавить функцию Search. Создаем новую папку "Sidebar", и внутри ее создаем другую папку "Search". Рисуем облако на новом слое в этой папке, немного осветляем и размываем, подобно примеру ниже. Затем, используя инструмент Rounded Rectangle Tool (Закругленный прямоугольник), тянем фигуру над облаком. Примените эффект слоя Обводка в1px внутри цветом #697372, и меняем значение Заливки слоя на 50%.
Шаг 34 Добавляем несколько белых звезд выше слоя с облаком, используя любую кисть, не забывая стирать все лишние звезды. Затем дублируем слой с воздушным шаром (из шага 29), уменьшаем и Edit > Flip horizontal (Редактировать > Отразить по горизонтали). Перемещаем копию в папку поисковика "Search". Еще добавим текст заглавия, используя шрифт Georgia Italic и желтый цвет (#D5A934). Потом добавляем для поисковой функции кнопку "Go!". Вы можете видеть пример опций на скриншоте ниже. Как заключительная деталь – рисуем одиночную яркую звезду позади текста.
Шаг 35 Добавим содержание сайтбара: заглавия, линки, и поместим каждую секцию в отдельную папку. Добавим мягкий фон звездного неба для каждой папки и блестящими звездами позади каждого заглавия. Кроме этого, добавим блестящую звезду для эффекта активации строки. Не выходите за края направляющих.
Шаг 36 Мы почти закончили. Давайте добавим нижний колонтитул для sidebar. Для начала, скроем небольшой участок фона внизу sidebar, используя его маску слоя и мягкую кисть. Далее рисуем несколько облаков, затем используем инструменты Dodge и Burn. Убедитесь, что облака не перекрывает контентный фон или не выходят за границу sidebar по ширине. Затем добавляем белое звездное небо сзади облаков и дублируем воздушный шар еще раз. Я сохранил все это в папке "Sidebar Footer".
Шаг 37 Теперь мы создадим нижний колонтитул. Для начала в маске слоя контентного фона, используя большую мягкую кисть, скрываем низ. Затем выбираем несколько кистей облаков и рисуем ими внизу по всей ширине проекта. Я комбинировал большие синие (#0B1C38) облака и маленькие голубые (#223E63). Помните, что эти облака станут фоновым изображением, так что не выходите за границы направляющих между контентным блоком и нижним колонтитулом. Кроме того, помните, что размещаем все слои нижних колонтитулов в новую папку "Footer".
Шаг 38 Самые светлые облака немного делаем темнее. Затем рисуем белое звездное небо, используя кисть 615 из набора. Далее рисуем еще более яркое звездное небо другой кистью, в данном случае под номером 656. Наконец, стираем часть звезд мягким большим ластиком.
