(нажмите на картику для просмотра оригинала)
Если по какой то причине вы не хотите изучать урок и хотите простоскачать дизайн сайта в psd формате - кликайте сюда и качайте
Если вам интересно самому/ой научиться делать такие дизайны этот урок для вас.
Для работы с дизайном нам понадобятся следующие файлы (скачать файлы одним архивом):
- фон с бабочками (для шапки сайта);
- шрифты;
- картинка c девушками;
- картинки для слайдера;
- иконки социальных сервисов;
- картинки для новостей;
- картинка рассылки;
- картинка счетчика.
Перед началом работы разделим наш дизайн на составляющие:
1. Фон и подложка для сайта;
2. Шапка сайта (состоит из логотипа и текста, тематической картинки, фона и основного навигационного меню)
3. Слайдер, в просторечье карусель;
4. Поиск по сайту;
5. Основной контент (сами новости);
6. Сайдбар - боковая колонка (блок последние новости, блок социальные сервисы, блок подписка, блок голосование)
7. Пейжер - постраничная навигация по сайту;
8. Футер - нижняя часть сайта.
Приступим к созданию нашего дизайна в фотошопе.
Настройка фотошопа
1. Открываем фотошоп и создаем новый документ File→New(Файл→Новый или CTRL+N– в скобочках вместе с переводом буду указывать сокращения – проще говоря "горячие” клавиши - если такое действие будет встречаться в уроке еще раз, я буду использовать уже только горячие клавиши, которые позволяют экономить время в программе фотошоп).
В окошке я указал следующие параметры:
2. Перед началом работы произведем некоторые настройки фотошопа:
- устанавливаем в фотошопе цвет переднего/заднего плана по умолчанию (черный/белый), для этого жмем D на клавиатуре, так же можно изменять цвета местами с помощью клавиши X (есть так же соответствующие кнопочки внизу панели с инструментами).
- поставим галочку Auto-Select (Автоматически выбрать) и в выпадающем меню выбираю Layer (Слои) – данная настройка позволяет выбрать любой слой по клику на нем.
- отобразим палитру History (История) идем Windows→ History - с помощью этой палитры можно отменять предыдущие действия сделанные в фотошопе (также работают горячие клавишы Ctrl+Z и Ctrl+Alt+Z.
- включаем шкалу-линейку для документа, идем Views→Rules(Вид→Линейки или CTRL+R) должна появиться горизонтальная и вертикальная шкала-линейка.
Сразу же следует убедиться, что данные на линейке отображаются в пикселях. Для этого щелкаем дважды мышкой по самой шкале с линейкой и выбираем такие параметры:
Далее используя направляющих (щелкаете по линейке и тянете мышку вправо или вниз), размечаем места под основные элементы шапки:
Если вы только начинаете пользоваться фотошопом, направляющие помогут вам при создании/рисовании обектов в фотошопе.
Создание фона и подложки для сайта
3. Открываем файл с фоном File→Open (Файл→Открыть или CTRL+O, фаил fon.jpg из архива). Полностью выделяем наш документ - нажимаемCTRL+A. Делаем из нашего рисунка фон в фотошопе, идем во вкладочкуEdit→ Define Patter (Правка→ Определить узор), пишем название (я написал pattern).
4. Переходим на наш основной документ, идем Edit→Fill (Правка→Заливка, SHIFT+F5), в окошке выбираем Pattern, далее выбираем иконку с нашим патерном и нажимаем OK (заливаем наш фон созданным паттерном).
5. Теперь создадим белую подложку для нашего дизайна. Создаем новый слой, идем Layer→ New→Layer (Слой→ Новый→ Слой). Даем ему любое название и жмем OK. В палитре со слоями (Windows→ Layers, Окно→Слои, F7) должен появится новый слой.
Сейчас нам помогут направляющие (щелкаем по линейке и тянем мышку вправо сделаем одну направляющую, а потом вторую - на глаз делаем что бы расстояние слева и справа было примерно одинаковым).
Удобно делать выделение с направляющими (если нужен точный размер области), но можно обойтись и без них (на глаз).
После этого берем инструмент Rectangular Marque Tool(Прямоугольное выделение, M) и рисуем прямоугольную область.
(нажмите на картику для просмотра оригинала)
Заливаем наше выделение любым цветом берем инструмент Paint Bucket Tool (Ведро, G) или просто жмем Alt+Backspace. После этого щелкаем по слою два раза и попадаем в стили слоя. Я выставил такие настройки дляDrop Shadow (Отбрасывать тень) - цвет выбрал #5F1338:
На этом с фоном закончим и перейдем к созданию шапки для сайта.
Делаем шапку для сайта
6. В начале создадим фон для шапки, из предложенного мною архива берем файл batterfly.jpg, открываем его в фотошопе File→Open. Теперь нужно перенести слой с картинкой в наш основной докумени. Для этого выбираем инструмент Move Tool, выбираем слои с иконкой, кликаем правой кнопкой мыши и выбираем пункт Dublicate Layer (Копия слоя).
В появившемся окошке вваодим название слою (я назвал fon-header), чуть ниже в поле Document (Документ) выбираем документ в который нужно вставить слой, у нас woman-design-blogohelp.psd и нажимаем OK.
Слой должен вставиться ровно посередине документа.
Теперь передвинем наш слой в самый верх, это можно сделать 2 способами:
Первый способ: берем инструмент Move Tool, кликаем по нашему слою с бабочками и не отпуская кнопку мыши еще нажимем клавишуShift (что бы слой двигался равно вверх) и после этого тянем мышку вверх и в нужном месте расспологаем наш слой.
Второй способ: выбираем слой с бабочками и слой с фоном в палитреLayers (F7)
После этого в настройках элемента Move Tool , выбираем иконкуAlign top edges (Выравнить обекты по верхнему краю):
В итоге у нас получилось:
(нажмите на картику для просмотра оригинала)
Я специально сделал фон с бабочками больше белого фона, сейчас расскажу как удалить лишние края слева и справа. Теперь выбираем мышкой наш слой с бабочками и берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольную область - выделяя наш ненужный кусок. После того как вы нарисовали область ее можно двигать клавишами Вверх, вниз, право, влево.
Далее просто нажимаем Delete и удаляем ненужную нам часть слоя. По анологии делаем с правым кусочком слоя. После этого для слоя fon-header, не снимая выделение со слоя, установим ему Opacity(Непрозрачность) в 20%.
7. Теперь сделаем небольшое затемние вверху шапки. Создаем новый слой- Shift+Ctrl+N. Даем ему любое название (у меня shadow-top) и жмемOK.
После этого не снимая выделения со слоя shadow-top нажимаем Ctrl и не отпуская его кликаем по иконке слоя fon-header.
(нажмите на картику для просмотра оригинала)
После этого заливаем слой любым цветом - Alt+Backspace и идем в свойства слоя (кликаем два раза по слою). Снимае выделение, нажимаемCtrl+H. Далее выбираем свойство Gradient Overlay (Заливка градиентом) и ставим такие свойства:
Далее кликаем по полоске с градиентом и ставим такие цвета:
Теперь нужно слой с затемнением (shadow-top) поместить ниже слоя (fon-header). Жмем F7, выбираем нужный нам слой, хватаем его мышкой и переносим на порядок ниже (так же можно менять порядок слоев используя клавиши Ctrl+} - опустить слой на порядок или Ctrl+{ - поднять слой на порядок).
Делаем логотип для сайта
8. Фон готов теперь давайте напишем наш текст и нарисуем логотип. Берем инструмент Horizontal Type Tool (Горизонтальный текст, T) и щелкаем на шапке в том месте, в котором планируем написать надпись - у меня это WomanSite.ru, и пишем ее. Настройки для надписи я задал такие:
Если у вас на компьютере нет такого шрифта, то его можно взять из моего архива.
C помощью инструмента Move Tool (V), расположил текст в нужном мне месте.
Далее с помощью этого же инструмента Horizontal Type Tool(Горизонтальный текст), выделим текст "Woman" и поменяем его цвет на другой #c9584a.
Точно так же поступим и с текстом "Site.ru", только цвет поставим#797878.
Сделаем обводку и тень нашему тексту. Кликаем два раза по слою и ставим галочки напротив Drop Shadow и Stroke (Обводка).
На этом с текстом все, переходим к логотипу.
9. Я хочу познакомить вас с основами рисования логотипов в фотошопе. Будем делать вот такой логотипчик (логотип сделан в виде завитушек, всего их 7 штук), на основе моего, который можно взять в заготовленном мною архиве.
Открываем в фотошопе файл logo.jpg, переносим картинку логотипа в основной документ и расплагаем рядом с текстом.
Слою с логотипом задаем Opacity (Непрозрачность) - 25% и отключаем видимость некоторых слоев - что бы не мешали (убираем иконку глазика напротив слоя в палитре Layers, F7)
Логотип будем рисовать (можно сказать отрисовывать) с помощью путей, они, так же называют векторными элементами или векторное включение в растровую картинку (кому интересно, подробнее про пути можно почитатьтут).
Кроме палитры Layers (F7), нам так же понадобится палитра Path (Пути). Что бы ее отобразить идем WIndows→Path (Окна→Пути).
Далее с помощью лупы (инструмент Zoom tool, Увеличитель , Z) приблизим нашу область перед текстом. Я увеличил на 500%.
Берем инструмент Pen Tools (Перышко, P) , поставим ему такие настройки: