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





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

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


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

Подсказка

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

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

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


Голубое портфолио


Шаг 1
Создайте новый документ 1080х1200 пикселей. Перейдите в меню Просмотр» Новая направляющая (View > New Guide). По умолчанию Положение (Position) измеряется в сантиметрах (cm), но нам нужно использовать пиксели (px).

Так как мы начнём с создания основной области, то выберите Горизонтальную направляющую, введите значение – 90, потом повторите создание направляющей, но введите значение – 990. Это значит что это ширина области контента будет равна 900, а отступ от краёв холста – 90.


Голубое портфолио


Шаг 2
Теперь нам нужно создать горизонтальные направляющие. Используйте следующие значения положения:

20px
170px
200px
650px
1000px
1165px


Голубое портфолио


Шаг 3
Можно переходить непосредственно к дизайну. Создайте новый слой (Create New Layer) “gray background”, сделайте выделение всего холста (Ctrl+A) и залейте его цветом #B2B2B2, используя инструмент Заливка (Paint Bucket Tool). Потом сделайте выделение верхней половины холста (от направляющей на уровне 650 пикселей и выше). Создайте новый слой (Create New Layer) “blue header” и залейте выделение #0BA5D1.


Голубое портфолио


Шаг 4
Создайте ещё один слой “main content area” и инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) со значение радиуса 10 пикселей создайте фигуру цветом #EFEFEF.

Создайте фигуру так, чтобы её нижняя сторона была на уровне направляющей 1000px, а верхняя часть должна исчезать за пределами холста.


Голубое портфолио


Шаг 5
К слою “main content area” с созданной фигурой примените следующие стили в меню Стилей слоя (Layer Style - Blending Options):

Отбрасывание тени (Режим – Умножение):


Голубое портфолио


Внешнее свечение (Режим – Нормальный, Метод – Мягкий):


Голубое портфолио


Внутреннее свечение:


Голубое портфолио


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


Голубое портфолио

Голубое портфолио


Шаг 6
Создайте новый слой (Create New Layer) и назовите её “top bar” и инструментом Прямоугольная область (Rectangular Marquee Tool) сделайте выделение в верхней части холста толщиной в 20 пикселей. Залейте его цветом #007BA4.

Потом создайте ещё один слой “blue header cover” и сделайте выделение остальной голубой области (смотрите на рисунок ниже), залейте его тем же голубым цветом, что и основание под прямоугольником.

Создайте следующий слой “footer”, сделайте выделение в нижней части холста (тонкая тёмно-серая полоска) и залейте его цветом #8F8F8F.

Я также понизил Непрозрачность (Opacity) стиля Обводка (Stroke) до 20%.


Голубое портфолио


Шаг 7
Создайте новый слой (Create New Layer) “header lights”, выберите инструмент Кисть (Brush Tool) большого размера с мягкими краями и создайте несколько белых пятен на синей области холста. Потом установите Режим наложения – Перекрытие (Blending Mode – Overlay) и Непрозрачность – 40%.


Голубое портфолио


Шаг 8
Создайте ещё один слой “header shadows” и проделайте то же самое с нижней серой областью, но используйте чёрную кисть. Режим наложения тот же, а Непрозрачность – 30%.


Голубое портфолио


Шаг 9
Загрузите бумажную текстуру, откройте её, измените ширину на 1080 пикселей и вставьте в наш документ. Назовите слой с этой текстурой – “paper texture”. Установите Режим наложения – Перекрытие (Blending Mode – Overlay) и Непрозрачность – 50%. Затем примените фильтр Резкость (Sharpen Filter), чтобы выделить больше деталей.


Голубое портфолио

Голубое портфолио


Шаг 10
Пятна на слоя “header highlights” и “header shadows” слишком заметны и нужно сильнее смешать их с фоном. Для этого к каждому слою примените фильтр Размытие в движении (Motion Blur Filter).


Голубое портфолио

Голубое портфолио


Шаг 11
Перейдём к добавлению красивых деталей к нашему дизайну. В голубой половине холста хорошо заметная белая линия прямоугольника. Я решил создать неровные потрепанные края для бумаги.
Для этого создайте новый слой (Create New Layer) “white border left”, он должен быть под слоем с бумажной текстурой, но над всеми остальными слоями (второй слой от самого верхнего), выберите инструмент Кисть (Brush Tool) размером 1 пиксель с жёсткостью – 100%. Белым цветом нарисуйте кривую линию по краю бумаги.

Перейдите в режим Свободного трансформирования (Free Transform) и сведите стороны окна трансформации так, чтобы линия стала узкой. Если вы хотите сделать эту линию толще, то сделайте копию этого слоя и потом объедините её с оригиналом.


Голубое портфолио


Шаг 12
Сделайте копию слоя с линией и переместите её на другую сторону синей части прямоугольника. Потом таким же образом нарисуйте кривую линию для верхней тонкой полоски. Также я создали линии для серой части, разделительную линию между половинками и на другие остальные края.


Голубое портфолио

Голубое портфолио


Шаг 13
Загрузите фотографию неба и вставьте её правую часть в наш документ. Расположите этот слой под слоем с бумажной текстурой.


Голубое портфолио


Установите Режим наложения – Умножение (Blending Mode – Multiply) и Непрозрачность – 50%. Выберите большой мягкий ластик с непрозрачностью 100% и сотрите некоторые области изображения. Облака должны остаться только в верхней части холста.


Голубое портфолио


Шаг 14
Используя направляющие определите область для меню (она должна быть между горизонтальными направляющими на уровне 170 и 200 пикселей). Инструментом Горизонтальный текст (Horizontal Type Tool) напишите кнопки меню. Я использовал шрифт “Arial” размером 14 pt, кернинг: -50, жирный (bold). Текстовый слой должен быть над слоем с бумажной текстурой.

Создайте прямоугольник с закруглёнными краями с радиусом 5 пикселей над словом “HOME”, расположите этот слой под слоем с текстом. Установите Непрозрачность слоя – 25%:


Голубое портфолио


Шаг 15
Добавьте логотип и прочие элементы дизайна в область шапки сайта.


Голубое портфолио


Шаг 16
Теперь напишите текст в области контента (серой области). Также добавьте разные иконки.


Голубое портфолио


Шаг 17
Вставьте образец вашей работы в пустую область синей части холста.


Голубое портфолио


Шаг 18
Создайте прямоугольное выделение в новом слое над картинкой, потом сделайте градиентную заливку цветом от чёрного к прозрачному сверху вниз. Выберите инструмент Ластик (Eraser Tool) и подотрите чёрную область, чтобы создать легкий эффект затенения верхней границы картинки. Потом установите Непрозрачность этого слоя – 35%.

Сделайте копию этого слоя затенения и примените Отражение по вертикали (Transform – Flip Vertical), перетащите копию к низу картинки.


Голубое портфолио


Шаг 19
Теперь создадим кнопки, которые позволяют сменять картинки. Инструментом Овальная область (Elliptical Marquee Tool) создайте правильное круглое выделение в новом слое, залейте его тёмно-серым цветом и примените Сжатие (Modify – Contract) со значением 2 пикселя. Залейте центральную область светло-серым градиентом.


Голубое портфолио


Шаг 20
Также создайте тёмную стрелку, указывающую влево. Объедините слой со стрелкой и кругом и примените стиль Отбрасывание тени (Layer Style - Drop Shadow):

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


Голубое портфолио


Внутренняя тень:


Голубое портфолио

Голубое портфолио


Шаг 21
Сделайте копию слоя со стрелкой и примените Отражение по горизонтали (Transform – Flip Horizontal), переместите вторую кнопку на другую сторону изображения.

Создайте новый слой “button shadows” под слоем с картинкой. Используя чёрную кисть с мягкими краями и малой непрозрачностью нарисуйте тень от кнопок.


Голубое портфолио


Шаг 22
Создайте ещё один слой над слоем с голубой шапкой и назовите его “shadows/highlights” и большой мягкой кистью создайте тени и свечения, как показанон иже.


Голубое портфолио


Конечный результат в оригинальном размере можно посмотреть здесь.




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

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: