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





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

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


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

Подсказка

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

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

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


Галерея дизайнера


1. Создайте новый документ размером 900х1200 пикселей.


Галерея дизайнера


2. Установите цвет заливки – белый, цвет фона - #cdd3d8. Выберите инструмент Градиент (Gradient Tool), тип – радиальный градиент, сделайте заливку с верхней части холста вниз к середине.


Галерея дизайнера


3. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите заголовок сайта в левом верхнем углу:


Галерея дизайнера


4. К заголовку примените такие стили в меню Стилей слоя (Layer Style - Blending Options):

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


Галерея дизайнера


Внутренняя тень (Режим – Нормальный):


Галерея дизайнера


Тиснение (Стиль – Внутренний скос, Метод – Жёсткая огранка, Режим подсветки – Осветление, Режим тени – Умножение):


Галерея дизайнера


5. Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 15 пикселей.


Галерея дизайнера


6. Создайте прямоугольник шириной 845 пикселей и высотой 50 пикселей. Залейте его любым цветом.


Галерея дизайнера


7. Перейдите в меню Стилей слоя (Layer Style - Blending Options) и настройте так:

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


Галерея дизайнера


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Галерея дизайнера


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


Галерея дизайнера

Галерея дизайнера


8. Добавьте навигационные разделы и несколько ссылок в правом верхнем углу.


Галерея дизайнера


9. К текстовым слоям примените стиль Отбрасывание тени (Layer Style - Drop Shadow):

Режим – Нормальный


Галерея дизайнера


10. В пустое поле навигационной панели вставьте поисковую полоску, используя инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 15 пикселей. Также добавьте иконку лупы и напишите “search…”.


Галерея дизайнера


11. Создайте ещё один закруглённый прямоугольник большего размера и сделайте заливку радиальным градиентом, как мы делали это с фоном.


Галерея дизайнера


12. Примените следующие стили к этому прямоугольнику:

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


Галерея дизайнера


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


Галерея дизайнера


13. Создайте ещё один прямоугольник с закруглёнными краями на левой стороне.


Галерея дизайнера


14. Потом примените следующие стили к этому прямоугольнику:

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


Галерея дизайнера


Внутренняя тень (Режим – Нормальный):


Галерея дизайнера


Наложение градиента (Режим – Нормальный, Стиль – Радиальный):


Галерея дизайнера


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


Галерея дизайнера


15. В этот маленький прямоугольник вставьте изображение и справа напишите текст.


Галерея дизайнера


16. Под этим текстом создайте два прямоугольника и залейте их любым цветом.


Галерея дизайнера


17. Примените следующие стили:

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


Галерея дизайнера


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Галерея дизайнера


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


Галерея дизайнера

Галерея дизайнера


18. Под этой областью создайте ещё один прямоугольник с картинкой внутри:


Галерея дизайнера


19. Добавьте заголовок и сердечки рейтинга.


Галерея дизайнера


20. Повторите этот процесс, чтобы заполнить всю оставшуюся область.


Галерея дизайнера


21. Между каждым рядом картинок добавьте разделитель – две 1-пиксельные линии друг над другом цветами #dee4eb и #b1b7bc.


Галерея дизайнера


22. Скопируйте навигационную панель вниз и добавьте туда информацию футера и навигацию.


Галерея дизайнера

Галерея дизайнера


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


Галерея дизайнера




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

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

Ваше Имя

Ваш E-mail

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

Введите код: