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





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

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


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

Подсказка

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

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

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


Креативный Web-дизайн


1. Создайте новый документ


Креативный Web-дизайн


2. Перейдите в меню Просмотр»Новая направляющая (View > New Guide) и настройте так:


Креативный Web-дизайн


3. Потом создайте ещё одну направляющую.


Креативный Web-дизайн


4. Выберите инструмент Градиент (Gradient Tool) , настройте, как показано ниже, и установите цвет заливки - #e6f7ff, а цвет фона - #ffffff. Сделайте заливку фона сверху до середины холста.


Креативный Web-дизайн


5. Выберите инструмент Горизонтальный текст (Horizontal Type Tool) и настройте, как показано ниже. Напишите заголовок сайта в верхней части холста.


Креативный Web-дизайн


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

Отбрасывание тени:


Креативный Web-дизайн


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


Креативный Web-дизайн

Креативный Web-дизайн


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


Креативный Web-дизайн


8. В правой части создайте фигуру (это и будет полем поиска).


Креативный Web-дизайн


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

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


Креативный Web-дизайн


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


Креативный Web-дизайн

Креативный Web-дизайн


10. Тем же инструментом создайте прямоугольник размером 80x50 пикселей. Это будет нашей кнопкой поиска.


Креативный Web-дизайн


11. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение на верхней части созданного прямоугольника и залейте его таким же цветом.


Креативный Web-дизайн


12. Сделайте копию этого слоя и поверните её ан 180 градусов (Transform – 180). Сдвиньте вторую фигуру вправо на том же уровне.


Креативный Web-дизайн


13. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение нижней половины фигуры и нажмите Delete.


Креативный Web-дизайн


14. Совместите обрезанную фигуру с оригинальной, как показано ниже (они не должны накладываться). Сделайте выделение слоя с обрезанной фигурой (Ctrl+Click).


Креативный Web-дизайн


15. Выберите слой с оригинальной фигурой и нажмите Delete. Повторите этот процесс для создания угла на левой стороне.


Креативный Web-дизайн


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

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


Креативный Web-дизайн


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


Креативный Web-дизайн


Измените размер поисковой кнопки и расположите её, как показано ниже:


Креативный Web-дизайн


17. В новом слое под слоем с поисковой кнопкой создайте два круга и напишите “SEARCH”.


Креативный Web-дизайн


18. Создайте прямоугольник с закруглёнными краями создайте фигуру, как показано ниже, размером 850x250. Залейте его белым цветом и создайте 1-пиксельную обводку цветом #cfeaea.


Креативный Web-дизайн


19. Создайте ещё одну фигуру (как кнопка поиска) на области навигационного меню и подпишите разделы:


Креативный Web-дизайн


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


Креативный Web-дизайн


21. Примените стиль Наложение градиента (Layer Style - Gradient Overlay):

Режим – Нормальный, Стиль – Линейный


Креативный Web-дизайн

Креативный Web-дизайн


22. Сделайте выделение этого слоя с разноцветной областью и примените фильтр Облака (Clouds Filter).


Креативный Web-дизайн


23. Потом примените фильтр Рисование на обороте (Underpainting Filter):


Креативный Web-дизайн


24. Затем фильтр Размытие в движении (Motion Blur Filter). При применении этих фильтров ваше выделение должно быть активно, иначе они все будут применены и на большой прямоугольник.


Креативный Web-дизайн


25. Установите Непрозрачность слоя – 50% и Режим наложения – Яркий свет (Blending Mode – Vivid Light):


Креативный Web-дизайн


26. Напишите текст. Примените стиль Внешнее свечение (Layer Style - Outer Glow) со стандартными настройками. Также создайте свечение в верхней половине, используя инструмент Перо (Pen Tool).


Креативный Web-дизайн


27. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 10 пикселей создайте три выделения. Общая ширина – 850 пикселей.


Креативный Web-дизайн


28. Залейте их любым цветом в новом слое и примените стиль Наложение градиента (Layer Style - Gradient Overlay):

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


Креативный Web-дизайн


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


Креативный Web-дизайн


29. Далее мне понадобились эти иконки. Я размещал их в верхней части прямоугольников и подписывал. Цвета я подбирал инструментом Пипетка (Eyedropper Tool) с разноцветной области.


Креативный Web-дизайн


30. Напишите остальной текст и закончите кнопкой “Read More”, созданной инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool).


Креативный Web-дизайн


31. Создайте ещё один закруглённый прямоугольник шириной 850 пикселей и залейте его цветом #e7f7ff. Также создайте 1-пиксельную обводку цветом #d5f0fc.


Креативный Web-дизайн


32. Вставьте иконку, напишите заголовок и текст.


Креативный Web-дизайн


33. Внизу создайте ещё один прямоугольник белого цвета и добавьте 1-пиксельную обводку цветом #d5f0fc.


Креативный Web-дизайн


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


Креативный Web-дизайн




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

написал : 2pa4ok=)

Спасибо огромное! Урок супер. Подскажите пожайлуста, что делать с нарисованным макетом дальше.. чтобы поставить его шаблоном на сайт

---------------


написал : NithrouS

Вот это реальный дизайн)

---------------


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

Ваше Имя

Ваш E-mail

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

Введите код: