Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:

Сайт web-приложений


Загрузите эти элементы:

Иконки WooFunction
Коричневая текстура


Подготовка
Скачайте 960 Grid System и распакуйте архив. Нам понадобится такая сетка, чтобы расположить компоненты сайта. После распаковки перейдите в папку templates>photoshop. Там вы найдёте 3 PSD файла. Каждый из этих файлов содержит сетку 12, 16 и 24 колонки. Нам понадобится сетка с 24-колонками. Если вы откроете этот файл, он уже будет содержать направляющие. Чтобы их активировать, перейдите в меню Просмотр»Показать»Направляющие (View > Show > Guides).

Шаг 1 – Настройка документа
Откройте PSD файл с 24 колонками и перейдите в меню Изображение»Размер холста (Image > Canvas Size). Введите эти значения:

Сайт web-приложений


Шаг 2 – Создание шапки сайта
Создайте новую группу (Create New Group) и назовите её “header”. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру в верхней части холста размером 1200х800 пикселей цветом #3b3c48. Назовите слой с прямоугольником - "header bg".

Сайт web-приложений


Шаг 3 – Название приложения
Инструментом Горизонтальный текст (Horizontal Type Tool) напишите название на синем прямоугольнике слева. Используйте направляющие, чтобы расположить текст. Я использовал шрифт “Myriad Pro Bold Italic” цветом #c0ccd0. Перейдите в меню Окно»Символ (Window > Character), чтобы настроить шрифт. Потом перейдите в меню Стилей слоя (Layer Style - Blending Options) и примените эти стили:

Отбрасывание тени: Режим – Умножение
Тиснение: Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление основы, Режим тени – Умножение
Наложение градиента: Режим – Мягкий свет, Стиль – Линейный

Сайт web-приложений


Шаг 4 – Навигационная область
Инструментом Горизонтальный текст (Horizontal Type Tool) и напишите названия разделов навигации. Я использовал шрифт “Myriad Pro Regular” цветом #c0ccd0. Примените к текстовым слоям стиль Отбрасывание тени (Layer Style - Drop Shadow):

Сайт web-приложений


Шаг 5 – Область популярности
Создайте новый слой (Create New Layer) и назовите его "featured". Инструментом Прямоугольник (Rectangle Tool) создайте фигуру цветом #c0ccd0 высотой 300 пикселей на всю ширину холста. Назовите слой "featured area bg" и примените стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Перекрытие, Стиль – Линейный

Сайт web-приложений


Шаг 6 – Добавление текстуры на область популярности
Откройте коричневую текстуру в Photoshop и создайте корректирующий слой Black & White (Layer – Black & White) и настройте, как показано ниже. Выберите оба слоя, кликните правой кнопкой и выберите Преобразовать в смарт-объект (Convert to Smart Object). Назовите полученный слой “texture”.

Сайт web-приложений


Инструментом Перемещение (Move Tool) перетащите текстуру в наш документ. Нужно расположить её по середине холста. Для этого выделите весь холст (Ctrl+A), выберите инструмент Перемещение (Move Tool) и в настройках сверху установите значение Выравнивание горизонтальных центров (Align horizontal centers). Снимите выделение (Ctrl+D). Чтобы текстура накладывалась только на область популярности, нужно создать обтравочную маску. Для этого кликните правой кнопкой на слое с текстурой и выберите Создать обтравочную маску (Create Clipping Mask).

Сайт web-приложений


Добавьте маску слоя к текстуре (Layer Mask), выберите инструмент Градиент (Gradient Tool), цвет – от чёрного к прозрачному, и, удерживая Shift, сделайте горизонтальную линейную заливку справа и слева, как показано ниже.

Сайт web-приложений


Режим наложения слоя с текстурой – Перекрытие (Blending Mode – Overlay) и Непрозрачность – 10%.

Шаг 7 – Добавление градиента
Сделайте выделение слоя “featured area bg” и создайте новый заливочный слой Градиент (Fill Layer - Gradient) и используйте настройки, показанные ниже. Градиент нужно расположить в верхней части области популярности. Установите Режим наложения – Перекрытие (Blending Mode – Overlay) и Непрозрачность – 25%.

Сайт web-приложений


Шаг 8 – Добавление ещё одного фона для области популярности
Инструментом Прямоугольник (Rectangle Tool) создайте фигуру высотой 100 пикселей цветом #747b81 прямо под предыдущим прямоугольником. Назовите этот слой “floor” и примените стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Перекрытие

Сайт web-приложений


Шаг 9 – Добавление текстуры
Сделайте копию слоя “texture” и расположите её над слоем “floor”, кликните правой кнопкой на ней и выберите Удалить маску слоя (Delete Layer Mask). Через то же контекстное меню создайте обтравочную маску (или воспользуйтесь комбинацией Alt+Click между слоями).
Перейдите в режим Перспективы (Transform – Perspective), удерживая Shift, потяните верхнюю левую точку вправо, а нижнюю левую влево. Когда закончите, нажмите Enter. Текстура растянется и вы получите что-то похожее на пол (поверхность).

Сайт web-приложений


Шаг 10 – Маскируем текстуру
Добавьте маску к текстуре (Layer Mask) и сделайте выделение слоя “texture”. Инструментом Градиент (Gradient Tool) сделайте заливку от чёрного к прозрачному справа и слева. Потом снимите выделение (Ctrl+D) и установите Режим наложения – Перекрытие (Blending Mode – Overlay), Непрозрачность – 5%.

Сайт web-приложений


Шаг 11 – Добавление шума
Создайте новый слой и залейте его белым цветом, используя инструмент Заливка (Paint Bucket Tool). Создайте обтравочную маску для него, чтобы ограничить пределы заливки. Кликните правой кнопкой на слое и выберите Преобразовать в смарт-объект (Convert to Smart Object). Потом примените фильтр Добавить шум (Add Noise Filter) с настройками, показанными ниже. Назовите слой “Noise”, установите Режим наложения – Умножение (Blending Mode – Multiply) и Непрозрачность – 20%.

Сайт web-приложений


Шаг 12 – Создание линий
Инструментом Линия (Line Tool), удерживая Shift, создайте прямую горизонтальную линию под шапкой сайта. Она должна быть на расстоянии 2 пикселей от неё. Цвет линии - #969da0, толщина – 1 пиксель. Назовите этот слой “1px line”. Сделайте копию линии (Ctrl+J) и переместите её вниз. Она должна быть на расстоянии 2 пикселей от нижнего тёмного прямоугольника (смотрите на картинку ниже).

Сайт web-приложений


Шаг 13 – Добавление контента на область популярности
Активируйте направляющие (Ctrl+;) и инструментом Горизонтальный текст (Horizontal Type Tool) создайте область шириной 430 пикселей (11 розовых колонок из 24). Заполните эту область текстом. Я использовал шрифт “Myriad Pro Bold” цветом #636d70 для заголовка и шрифт “Helvetica Regular” для статьи.

Сайт web-приложений


Шаг 14 – Создание кнопок действия
Мы создадим две кнопки: кнопку покупки и кнопку загрузки.
Создайте новую группу (Create New Group) и назовите её "buy now button". Выберите инструмент Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) со значением радиуса 4 пикселя. Создайте фигуру размером 180х42 пикселя цветом #80acbc. Назовите этот слой “button” и примените к нему следующие стили слоя:

Внутреннее свечение: Режим – Перекрытие
Тиснение: Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление основы, Режим тени – Умножение
Наложение градиента: Режим – Мягкий свет, Стиль – Линейный
Обводка: Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет, Цвет - #6c92a0

Сайт web-приложений


Инструментом Прямоугольник (Rectangle Tool) создайте маленький прямоугольник цветом #628b9a поверх правой части предыдущей фигуры, как показано ниже. Добавьте к нему 1-пиксельную обводку цветом #476873. Потом создайте обтравочную маску и понизьте Непрозрачность до 75%.

Сайт web-приложений


Шаг 15 – Добавление текста на кнопку
Инструментом Горизонтальный текст (Horizontal Type Tool) напишите название кнопки “BUY NOW”. Я использовал шрифт “Myriad Pro Black” цветом #b4dcea. К названию кнопки примените следующие стили:

Отбрасывание тени: Режим – Умножение
Тиснение: Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление основы, Режим тени – Умножение

Сайт web-приложений


Текстовым инструментом создайте символ “»” и расположите его на крайней тёмной части кнопки. Цвет стрелок - #95c1d1, размер 44pt. Примените стиль Отбрасывание тени: Режим – Умножение

Сайт web-приложений


Шаг 16 – Создание тени от кнопки
Инструментом Эллипс (Ellipse Tool), удерживая Shift, создайте чёрный круг размером 10х10 пикселей (1). Расположите круг на расстоянии 20 пикселей вниз от кнопки. Кликните правой кнопкой на этом слое и выберите Преобразовать в смарт-объект (Convert to Smart Object), перейдите в режим Свободного трансформирования (Free Transform), и, удерживая Alt+Shift, потяните правую среднюю точку трансформации вправо (2,3).
Примените фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 2,2 пикселя (4). Назовите этот слой “shadow” и понизьте Непрозрачность до 7% (5).

Сайт web-приложений


Шаг 17 – Создание кнопки загрузки
Таким же образом создайте кнопку "download” и тень для неё.

Сайт web-приложений


Шаг 18 – Добавление изображения
Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) создайте фигуру размером 470х270 пикселей. Можете воспользоваться направляющими, если хотите. Назовите этот слой "image_holder" и примените стили Внутреннее свечение (цвет - #c7d0d3) и Обводка (цвет - #889092).
Вставьте любое изображение в наш документ, назовите слой “image ”, создайте для него обтравочную маску. Изображение, которое я выбрал, можете скачать в этом уроке. Я использовал корректирующий слой Тон/Насыщенность (Levels - Hue/Saturation), чтобы изменить цвет:

Сайт web-приложений


Шаг 19 – Добавление тени
Создайте тень от изображения также, как мы делали с кнопкой "buy now" в шаге 16.

Сайт web-приложений


Шаг 20 – Создание области для скриншотов и информации о сайте
Создайте новую группу "screenshots & about". Инструментом Прямоугольник (Rectangle Tool) создайте прямоугольник под областью популярности высотой 120 пикселей на всю ширину холста. Цвет фигуры - #54595d. Назовите слой "rectangle” и примените эти стили:

Отбрасывание тени: Режим – Перекрытие
Наложение градиента: Режим – Перекрытие, Стиль – Линейный

Сайт web-приложений


Выберите инструмент Линия (Line Tool) и задайте толщину 1 пиксель. Создайте прямую горизонтальную линию в верхней части только что созданного прямоугольника. Цвет линии - #42474a, назовите слой "1px line". Сделайте копию слоя с линией и инструментом Перемещение (Move Tool) опустите её на 1 пиксель вниз. Измените цвет этой линии на #5a5f64. Создайте ещё две такие же линии в нижней части прямоугольника.

Сайт web-приложений


Шаг 21 – Создание контента для области информации о сайте
Инструментом Горизонтальный текст (Horizontal Type Tool) напишите текст в созданном прямоугольнике. Используйте направляющие. Ширина текстового блока – 430 пикселей (11 розовых колонок). Для создания заголовка я использовал шрифт “Myriad Pro Bold” размером 22pt, цветом #889096. Для текста под заголовком – “Helvetica Regular” размером 12pt цветом #a6afb6.

Сайт web-приложений


Шаг 22 – Создание кнопки “READ MORE”
Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) с радиусом 2 пикселя создайте фигуру размером 90х20 пикселей цветом #a0a7ac. Назовите этот слой “button” и расположите под текстом, как показано ниже. Текстовым инструментом напишите “READ MORE” на кнопке: шрифт – “Myriad Pro Semibold” размером 12pt. цветом #5a5e62.

Сайт web-приложений


Шаг 23 – Создание области скриншотов
Область скирншотов будет расположена справа от области “About” в том же фоновом прямоугольнике. Текстовым инструментом напишите “Screenshot” тем же шрифтом, что и “About”. Активируйте направляющие и расположите первую букву заголовка на одной линии с верхним изображением области популярности.
Инструментом Прямоугольник с закругленными углами (Rounded Rectangle Tool) с радиусом 4 пикселя создайте прямоугольник размером 110х60 пикселей. Назовите этот слой “image_holder”, сделайте 3 копии и расположите все 4 прямоугольника, как показано ниже.

Сайт web-приложений


Шаг 24 – Добавление изображений
Добавьте изображение в наш документ, назовите слой “image” и расположите его над слоем первым прямоугольником “image_holder”. Создайте обтравочную маску для этого слоя. Проделайте то же самое для трёх остальных прямоугольников.

Сайт web-приложений


Шаг 25 – Создание разделителя
Создайте новую группу “separator”. Инструментом Линия (Line Tool) нарисуйте две вертикальные линии от верхней до нижней границы фонового прямоугольника. Эти линии должны отделять область “About” от области “Screenshots”. Цвет одной линии - #5a5f64, цвет другой - #42474a.
К группе “separator” добавьте маску слоя (Layer Mask). Выберите инструмент Градиент (Gradient Tool), цвет – от чёрного к прозрачному, и, удерживая Shift, сделайте вертикальную заливку в верхней части линий. Потом создайте такую же заливку в нижней части (стрелки показывают направление градиента).

Сайт web-приложений


Шаг 26 – Создание области “Features”
Создайте новую группу “features” и инструментом Прямоугольник (Rectangle Tool) создайте прямоугольник высотой 300 пикселей на всю ширину холста цветом #abb1b5 под областью скриншотов и информации о сайте. Назовите слой “bg”. Инструментом Линия (Line Tool) создайте две горизонтальные линии в нижней части прямоугольника толщиной 1 пиксель. Цвет первой - #c2c7ca, цвет второй - #93999d.

Сайт web-приложений


Шаг 27 – Добавление иконок
Из загруженного набора иконок выберите иконку лампочки и вставьте её в верхний левый угол созданного прямоугольника. Назовите этот слой "light bulb icon". Активируйте направляющие для удобства.
Текстовым инструментом напишите слово "Features" справа от лампочки. Я использовал шрифт “Myriad Pro Bold” размером 24pt. цветом #d1d9df. Примените стиль Отбрасывание тени:

Режим – Умножение

Сайт web-приложений


Шаг 28 - Создайте рамок
Создайте новую группу “feature 1”, инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте фигуру с радиусом 4 пикселя размером 190х100 пикселей. Назовите этот слой "image holder". Примените к нему стили:

Внутреннее свечение: цвет - #babfc2
Обводка: Положение – Внутри, Режим – Нормальный, Тип обводки – Цвет, Цвет - #93989d

Сайт web-приложений


Откройте изображение (макет сайта или что-нибудь другое) в Photoshop и перетащите в наш документ. Инструментом Перемещение (Move Tool) расположите изображение на прямоугольнике , назовите слой “image” и создайте обтравочную маску.

Сайт web-приложений


Инструментом Прямоугольник (Rectangle Tool) создайте прямоугольник размером 110х24 пикселя цветом #54595d на картинке, которую только что вставили. Текстовым инструментом напишите “FEAUTURE 1” на прямоугольнике. Я использовал шрифт “Helvetica Bold Oblique” цветом #cbd2d6.

Сайт web-приложений


Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 4 пикселя создайте фигуру размером 90х24 пикселя, как показано ниже. Цвет - #c2c6c8. Назовите этот слой “button” и примените к нему стиль Обводка: Положение – Внутри, Режим – Нормальный, Тип обводки – Цвет, Цвет - #93989d.
Текстовым инструментом напишите “Read More” на созданном прямоугольнике. Цвет текста - #777b7f.

Сайт web-приложений


Создайте ещё 3 рамки с изображениями. Вы даже можете просто сделать 3 копии группы “feature 1” и изменить картинки.

Сайт web-приложений


Шаг 29 – Создание области для видео
Создайте новую группу “video”. Из загруженного набора иконок выберите иконку экрана и добавьте его в наш документ. Назовите слой “video icon”. Текстовым инструментом напишите "Video Presentation" справа от иконки. Я использовал шрифт “Myriad Pro Bold” цветом #d1d9df. К тексту примените стиль Отбрасывание тени: Режим – Умножение.

Сайт web-приложений


Инструментом Прямоугольник (Rectangle Tool) создайте фигуру размером 470х220 пикселей. Назовите этот слой “image_holder” и примените эти стили:

Внутреннее свечение: Цвет - #afb6bb
Обводка: Положение – Внутри, Режим – Нормальный, Тип обводки – Цвет, Цвет - #777e84.

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

Сайт web-приложений


Шаг 30 – Создание кнопки воспроизведения
Создайте новую группу “play button” и инструментом Эллипс (Ellipse Tool) создайте круг размером 50х50 пикселей цветом #616569. Назовите слой “circle” и примените к нему эти стили:

Наложение градиента: Режим – Перекрытие, Стиль – Радиальный
Обводка: Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет.

Теперь нужно расположить круг в центре изображения. Для этого:
1. Сделайте выделение слоя “image_holder”.
2. Перейдите на слой с кругом “circle”.
3. Перейдите в меню Слой»Выровнять слои по области»Центры по вертикали (Layer > Align Layers to Selection > Vertical Centers).
4. Перейдите в меню Слой»Выровнять слои по области»Центры по горизонтали (Layer > Align Layers to Selection > Horizontal Centers).
5. Снимите выделение (Ctrl+D).
Инструментом Перо (Pen Tool) нарисуйте треугольник цветом #c9cdd0 на круге. Назовите этот слой “triangle”.

Сайт web-приложений


Шаг 31 – Создание области блога
Создайте новую группу “blog” и инструментом Прямоугольник (Rectangle Tool) создайте фигуру высотой 500 пикселей на всю ширину холста внизу (под областью “Feaures”). Назовите слой “bg”.
Вставьте иконку карандаша на этот прямоугольник слева и подпишите эту область словом “BLOG”. Я использовал шрифт “Myriad Pro Bold” цветом #777e84.

Сайт web-приложений


Шаг 32 – Создание новости блога
Инструментом Прямоугольник (Rectangle Tool) создайте квадрат размером 150х150 пикселей. Назовите слой “image_holder” и примените к нему эти стили:

Внутреннее свечение: Цвет - #d1d5d8
Обводка: Цвет - #889092.

Вставьте изображение в этот квадрат, назовите слой “image” и создайте обтравочную маску. Потом текстовым инструментом напишите немного о новости. Я использовал шрифт “Helvetica” (regular) цветом #808487.

Сайт web-приложений


Потом создайте ещё одну новость:

Сайт web-приложений


Шаг 33 – Создание области рекомендаций
Создайте новую группу “testimonials”. Вставьте иконку, показанную ниже справа от блога. Назовите слой “comment icon”. Эта иконка должна быть расположена на одной линии с иконкой карандаша. Текстовым инструментом напишите "Testimonials", шрифт – “Myriad Pro Bold”, цвет - #777e84.

Сайт web-приложений


Создайте прямоугольник с закруглёнными углами с радиусом 4 пикселя размером 80х60 пикселей цветом #abb1b5. Сделайте 1-пиксельную обводку цветом #93989d.
Выберите инструмент Перо (Pen Tool) и в настройках сверху установите значение Добавить к области фигуры (Add to shape area) и дорисуйте треугольник внизу, чтобы получить большую иконку комментария.

Сайт web-приложений


Создайте прямоугольник внутри первой фигуры, назовите слой “image_holder”, вставьте в него картинку, слой с которой назовёте “image” и создайте обтравочную маску. Выберите все эти слои с картинкой и фигурой комментария и объедините в группу (Ctrl+G). Группу назовите “1”.

Сайт web-приложений


Создайте прямоугольник с закруглёнными краями размером 430х70 пикселей цветом #b2b7ba. Назовите этот слой “text_bg”и сделайте 1-пиксельную обводку внутри цветом #a4a9ac. Расположите этот слой под группой “1”. Активируйте направляющие и напишите текст. Текст должен быть расположен, как показано ниже. Я использовал шрифт “Helvetica Regular” цветом #6f7274.

Сайт web-приложений


Создайте ещё два комментария.

Сайт web-приложений


Шаг 34 – Создание футера
Создайте новую группу “footer” и создайте прямоугольник высотой 50 пикселей на всю ширину холста цветом #b0b5b8. Инструментом Линия (Line Tool) создайте горизонтальную линию толщиной 1 пиксель цветом #93999d в верхней части прямоугольника. Назовите этот слой “1px line” и сделайте её копию (Ctrl+J). Инструментом Перемещение (Move Tool) опустите копию на 1 пиксель вниз (одно нажатие на клавишу стрелки вниз на клавиатуре). Измените цвет второй линии на #c2c7ca.
Текстовым инструментом напишите текст о правах. Я использовал шрифт “Helvetica Regular” цветом #81878b.

Сайт web-приложений


Финальный результат

Сайт web-приложений



Изображение в оригинальном размере можете посмотреть здесь.




Обсудить данный урок на форуме





PSD файл

Ссылка на источник урока