Ознакомьтесь с тем, над чем мы сегодня будем работать:
Необходимые ресурсы
* Сеточная система 960
* Текстура бумаги
* BuddyIcons
* Иконка Twitter, разработанная mfayaz
Введение в сеточную систему 960
В данном руководстве мы воспользуемся сеточной системой 960 для организации и расстановки элементов нашего веб-шаблона. Перед тем как начать, скачайте данную систему на свой жесткий диск.
Распакуйте архив, который вы только что скачали, перейдите в папку «templates», а затем пройдите в папку «photoshop». Там вы увидите 3 PSD-файла. Каждый из файлов содержит в себе сетку с 12, 16 или 24 колонками.
В данных PSD-файлах уже выставлены некоторые направляющие, они могут быть очень полезны. Для того чтобы активировать линейки, пройдите в меню View > Show > Guides, либо воспользуйтесь сочетанием клавиш Ctrl/Cmd + ;.
В ходе данного руководства нам нужно будет создавать фигуры с определенными размерами. Для того чтобы узнать точный размер фигуры или выделения в момент создания, откройте панель информации, пройдя в меню Window > Info. Ширина и высота фигур и выделений отображается на данной панели.
Этап 1: Настройка документа
Откройте файл под названием 960_grid_12_col.psd в Photoshop. Затем пройдите в меню Edit > Canvas Size и установите ширину на 1200px, а высоту примерно на 1600px. Вы можете выставить высоту позже таким образом, чтобы она соответствовала размеру вашего шаблона.
Этап 2: Создаем фон
Для того чтобы создать ощущение глубины, давайте добавим незначительный фон. Вместо того чтобы копировать и вставлять полноразмерную текстуру в основной документ, мы сократим размер файла за счет создания текстуры, которую можно будет подстроить под размеры документа как по ширине, так и по высоте. Давайте начнем с создания документа с разрешением 500х500 пикселей в Photoshop. Убедитесь, что вы выставили разрешение по соотношению пикселей на дюйм на 72, так как это идеальное разрешение для изображений, предназначенных для использования в интернете.
Залейте фон светло-синим цветом (#d5e2e7)
Для нашего сегодняшнего руководства мы подобрали данную текстуру бумаги с сайта stock.xchng. Вставьте текстуру в документ bg_texture, а затем пройдите по следующим этапам:
* Уменьшите текстуру и примените фильтр резкости, чтобы выявить детали
* Обесцветьте текстуру (shift+ctrl+U)
* Переключите режим смешивания слоя на multiply и понизьте уровень плотности отображения до приблизительно 20%. В результате у нас должно получиться нечто вроде этого:
Результат почти незаметен, но это будет достаточно для того, чтобы сделать наш основной документ глубже. Теперь пройдите в меню Edit>Define Pattern, и не забудьте задать название данной текстуре.
В нашем основном документе мы эту текстуру теперь применим. Выберите фоновый слой и пройдите в меню Edit>Fill, выбрав затем только что созданную текстуру.
Этап 3: Разработка шапки
Создайте новую группу и назовите ее «header». Выберите инструмент для создания прямоугольника (Rectangle Tool – U), и создайте прямоугольник с размерами 2000х150 пикселей и цветом #404448. Назовите его «header bg». Кликните правой кнопкой мыши по этому слою и выберите пункт Convert to Smart Object (преобразовать в smart object). Затем пройдите в меню Filter > Noise > Add Noise и примените указанные на изображении параметры.
Добавьте название вашей дизайн-студии посредством инструмента создания текста (Type Tool – Т) с левой стороны шапки. Мы использовали шрифт Steinem Bold Italic размером в 90pt. Активируйте направляющие (Ctrl/Cmd + ;), они помогут вам расположить все точно так, как отображено на изображении ниже.
Как только закончите с расположением логотипа, можно будет добавить меню в верхний правый угол. Мы использовали шрифт Myriad Pro размером в 15pt. Мы также задали каждой ссылке небольшую тень для того, чтобы они выделялись на фоне.
Мы создали прямоугольник для того, чтобы отдельно выделить секцию Home. Для того чтобы выделить выбранную страницу, мы применим стиль кнопки к данному выделению. Примените стиль, приведенный ниже, посредством двойного клика по фигуре кнопки на панели слоев для того, чтобы открыть диалоговое окно редактирования стилей слоя. Примените данные стили к внутренней тени (Inner Shadow), а также 1 пиксель к контуру (Stroke) цветом #42454a по внешней стороне прямоугольника.
Для того чтобы придать немного глубины, мы добавили границу толщиной в 1 пиксель и цветом #ffffff под шапкой (при помощи инструмента Line).
Этап 4: Создание подзаголовка
Пришло время для разработки подзаголовка. Так как подзаголовок – это одна из первых вещей, которую видит посетитель, как раз в эту строку неплохо было бы включить какую-нибудь информацию о сайте и услугах.
Мы использовали как шрифт Chunk Five (для верхнего текста), так и шрифт Gibson (для нижнего). Видимая сетка поможет вам расположить все элементы корректно.
Этап 5: Добавляем разделитель
Для того чтобы отделить подзаголовок от секции с работами, мы создадим разделительную полосу. Создайте новую группу и назовите ее «separators». Выберите инструмент для создания линий (Line Tool – U), и создайте вертикальную линию от самого верха закругленного прямоугольника, до самого низа. Установите белый цвет (#FFFFFF), и назовите этот слой «1px line».
Продублируйте этот слой (правая кнопка мыши + пункт Duplicate). Измените цвет новой линии на #abb0b3. Выберите инструмент перемещения (Move Tool – V), и передвиньте слой на один пиксель вниз.
В группу separators добавьте маску (Layer > Layer Mask > Reveal All). Затем выберите инструмент заливки градацией (Gradient Tool – G), зажмите клавишу Shift и «протяните» черно-прозрачную градацию от левой стороны вашего разделителя для того, чтобы создать эффект исчезновения. Повторите то же самое и с правой стороной. В завершении у вас должно получиться нечто подобное:
Поздравляем! Мы уже на полпути!
Следите за новостями, и не пропустите вторую часть руководства!
