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





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

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


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

Подсказка

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

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

Назначение данного урока - показать принцип рисования сайта. В итоге мы получим изображение, показанное ниже:


Online портфолио


1. Создайте новый документ размером 766×699 px и разрешением 72 dpi.



Online портфолио


2. При помощи инструмента Прямоугольник (Rectangle Tool) создайте фон страницы сайта:



Online портфолио


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



Online портфолио


Настройки градиента:



Online портфолио


Online портфолио


4. Создайте новый документ размером 4×4 px и разрешением 72 dpi. При помощи инструмента Карандаш (Pencil Tool) нарисуйте узор белого цвета:



Online портфолио


Online портфолио


5. Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор. Инструментом Прямоугольник (Rectangle Tool) создайте на верхней части фона тонкую полосу.



Online портфолио


Online портфолио


6. Установите Заливку (Fill) слоя - 0% и примените для слоя стиль Наложение узора
(Layer Style - Pattern Overlay).



Online портфолио


Online портфолио


Online портфолио


7. Используя тот же инструмент Прямоугольник (Rectangle Tool), создайте другую полосу цветом #BBDD03 над предыдущей.



Online портфолио


Online портфолио


8. Скопируйте ранее сделанную полосу, составляющую белые точки, и в режиме Свободного трансформирования (Free Transform) расположите копию на основании фона:



Online портфолио


Скройте основание:



Online портфолио


9. Создайте ещё один новый документ размером 4×4 px и разрешением 72 dpi. При помощи инструмента Карандаш (Pencil Tool) нарисуйте другой узор цветом #729C06.



Online портфолио


Online портфолио


10. Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор. Выберите инструмент Прямоугольник (Rectangle Tool) и нарисуйте другую толстую полосу на нижней части фона, но расположите её ниже, чем скопированная полоса из белых точек.



Online портфолио


Online портфолио


11. Установите Заливку (Fill) слоя - 0% и примените для слоя стиль Наложение узора
(Layer Style - Pattern Overlay).



Online портфолио


Online портфолио


Online портфолио


12. При помощи инструмента Перо (Pen Tool) нарисуйте узор на фоне цветом #AAD500 и подкорректируйте форму элемента инструментом Преобразовать точку привязки
(Convert Point Tool).



Online портфолио


13. Тем же способом нарисуйте следующий элемент узора цветом #AAD700.



Online портфолио


14. Ещё один элемент сделайте цветом #AECD01.



Online портфолио


15. Используя тот же инструмент и цвет, нарисуйте ещё несколько элементов узора.



Online портфолио


16. Скопируйте последний слой и в режиме Свободного трансформирования (Free Transform) уменьшите копию и расположите её, как показано ниже:



Online портфолио


17. Сделайте другую копию того же слоя и в режиме Свободного трансформирования
(Free Transform) расположите копию, как на рисунке ниже:



Online портфолио


18. Создайте новый слой (Create New Layer) и используйте на нём инструмент Карандаш
(Pencil Tool) для создания другого узора цветом #E3E3E3.



Online портфолио


Online портфолио


19. Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте первичный слой для раздела сайта белого цвета.



Online портфолио


Online портфолио


20. Примените для слоя стиль Отбрасывание тени (Layer Style - Drop Shadow).



Online портфолио


Наложение узора:



Online портфолио


Online портфолио


21. Сделайте 2 копии последнего слоя и инструментом Свободное трансформирование
(Free Transform) расположите копии, как на рисунке ниже:



Online портфолио


22. Теперь вставьте соответствующие рисунки в созданные разделы:



Online портфолио


23. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте первичный слой для нумерации раздела сайта цветом #EBEBEB. Подкорректируйте форму элемента с помощью инструмента Преобразовать точку привязки (Convert Point Tool).



Online портфолио


Online портфолио


24. Скопируйте последний слой и инструментом Свободное трансформирование (Free Transform) уменьшите копию и измените её цвет на #49BD14.



Online портфолио


25. Примените для копии стиль Обводка (Layer Style - Stroke).



Online портфолио


Online портфолио


26. При помощи инструмента Прямоугольник (Rectangle Tool) создайте свечение на месте номера. Цвет свечения - #E3E3E3. Используйте инструмент Добавить точку привязки (Add Anchior Point Tool) на нижней части свечения. Измените форму элемента инструментом Преобразовать точку привязки (Convert Point Tool).



Online портфолио


27. Удерживая Alt, кликните между слоем свечения и зелёным слоем для номера, чтобы свечение было в пределах зелёного слоя.



Online портфолио


Online портфолио


28. Объедините в группу все слои, содержащие место для номера. Сделайте 2 копии группы и в режиме Свободного трансформирования (Free Transform) расположите копии в соответствующих разделах сайта. Измените основные цвета копий: первая копия - #ED9300, вторая - #5EA9D1.



Online портфолио


29. Пронумеруйте разделы сайта, немного наклонив номера инструментом Свободное трансформирование (Free Transform):



Online портфолио


Online портфолио


30. Примените для номеров стиль Отбрасывание тени (Layer Style - Drop Shadow).



Online портфолио


Online портфолио


31. Теперь вставьте название сайта. Настройки указаны ниже:



Online портфолио


Online портфолио


32. Примените для надписи стиль Отбрасывание тени (Layer Style - Drop Shadow).



Online портфолио


Online портфолио


33. Создайте новый слой (Create New Layer) и стандартной кистью маленького размера нарисуйте несколько маленьких белых пятен, но некоторые из них сделайте цветом #D7FF00. Расположите слой пятен ниже слоёв для разделов сайта, но выше, чем слой названия сайта.



Online портфолио


34. Вставьте названия разделов сайта, соблюдая нижеуказанные настройки. Для “About us”:



Online портфолио


Для названий разделов чёрного цвета:



Online портфолио


Online портфолио


35. Теперь создайте меню на верхней части сайта. Настройки указаны ниже:



Online портфолио


Online портфолио


36. Создайте ещё один новый слой (Create New Layer) и при помощи инструмента Карандаш (Pencil Tool) нарисуйте пиктограммы белого цвета возле кнопок:



Online портфолио


Online портфолио


37. Используя тот же инструмент, нарисуйте разделительные вертикальные полосы:



Online портфолио


38. Скопируйте последний слой и в режиме Свободного трансформирования (Free Transform) расположите копию, как в следующем рисунке:



Online портфолио


39. Для обеих разделительных полос примените стиль Внешнее свечение
(Layer Style - Outer Glow):



Online портфолио


Online портфолио


40. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте первичный слой кнопки белого цвета и расположите его ниже самого раздела.



Online портфолио


Online портфолио


41. Примените для слоя стиль Отбрасывание тени (Layer Style - Drop Shadow).



Online портфолио


Online портфолио


42. Скопируйте последний слой и в режиме Свободного трансформирования (Free Transform) минимизируйте копию и сделайте её цветом #6DD800:



Online портфолио


43. Примените для копии стиль Обводка (Layer Style - Stroke).



Online портфолио


44. При помощи инструмента Прямоугольник (Rectangle Tool) создайте свечение цветом #A9DB7C на месте номера. Вставьте точку на верхней части свечения инструментом Добавить точку привязки (Add Anchior Point Tool) и подкорректируйте его форму инструментом Преобразовать точку привязки (Convert Point Tool).



Online портфолио


45. Удерживая Alt, кликните между слоем свечение и зелёным слоем кнопки:



Online портфолио


Online портфолио


46. Объедините в группу все слои, содержащие кнопку раздела. Сделайте 2 копии этой группы и в режиме Свободного трансформирования (Free Transform) расположите их под соответствующими разделами сайта. Измените основной цвет копий: первая копия - #F0920D, вторая копия - #5191AD. Цвета свечений также измените: оранжевая кнопка - #F6C073, синяя кнопка - #89B4C7).



Online портфолио


47. Теперь вставьте названия кнопок разделов:



Online портфолио


Online портфолио


48. Примените для надписей стиль Отбрасывание тени (Layer Style - Drop Shadow).



Online портфолио


Online портфолио


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



Online портфолио


50. Примените для слоев стиль Отбрасывание тени (Layer Style - Drop Shadow).



Online портфолио


Online портфолио


51. Вставьте картинки в созданные разделы.



Online портфолио


52. Используя инструмент Прямоугольник (Rectangle Tool), создайте двойную разделительную полосу. Левая полоса должна быть зелёного цвета, а правая - белого.



Online портфолио


53. Для левой полосы: установите Заливку (Fill) - 0% и примените стиль Наложение узора
(Layer Style - Pattern Overlay).



Online портфолио


54. Для правой полосы: установите Непрозрачность (Opacity) - 70%, Заливку (Fill) - 0% и примените стиль Наложение узора (Layer Style - Pattern Overlay).



Online портфолио


Online портфолио


Online портфолио


55. Скопируйте последний слой и инструментом Свободное трансформирование (Free Transform) расположите копию, как показано на рисунке:



Online портфолио


56. Теперь вставьте необходимый текст в разделы сайта. Настройки для выделенного текста:



Online портфолио


Для обычного текста:



Online портфолио


Для подчеркнутого текста:



Online портфолио


Online портфолио


57. Теперь добавьте кнопки навигации и ссылки. Настройки для “”:



Online портфолио


Для “Read more”:



Online портфолио


Online портфолио


58. При помощи инструмента Эллипс (Ellipse Tool) создайте круг цветом #FFD40F в правом нижнем углу страницы.



Online портфолио


59. Примените для круга стиль Отбрасывание тени (Layer Style - Drop Shadow).



Online портфолио


Обводка:



Online портфолио


Online портфолио


Online портфолио






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

написал : Лена

Тяжело делать узоры sad

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


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

Ваше Имя

Ваш E-mail

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

Введите код: