Персональный web сайт

В этом уроке мы научимся создавать веб-страничку для личного сайта.



Персональный web сайт


1. Создайте новый документ размером 800×800 px и разрешением 72 dpi. При помощи инструмента Прямоугольник (Rectangle Tool) создайте фон сайта:



Персональный web сайт


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



Персональный web сайт


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



Персональный web сайт


3. Создайте новый слой (Create New Layer) и выберите инструмент Кисть (Brush Tool) из стандартного набора кистей, кликнув правой кнопкой мыши на рисунке (цвет — #98B660). После этого нарисуйте 2 маленькие полосы, как показано ниже. Инструментом Ластик (Eraser Tool) сотрите ненужные элементы.



Персональный web сайт


Персональный web сайт


4. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте первичный слой, предназначенный для панели сайта, но нам необходимо удалить вершину с верхней части и левого основания инструментом Удалить точку привязки (Delete Anchior Point Tool).



Персональный web сайт


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



Персональный web сайт


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



Персональный web сайт


6. Теперь нам необходимо создать рамку для панели сайта, используя инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool).



Персональный web сайт


7. Установите Заливку (Fill) слоя — 0% и примените для рамки стиль Внешнее свечение
(Layer Style — Outer Glow).



Персональный web сайт


Обводка:



Персональный web сайт


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



Персональный web сайт


9. Установите Заливку (Fill) слоя — 0% и примените для слоя стиль Наложение градиента
(Layer Style — Gradient Overlay).



Персональный web сайт


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



Персональный web сайт


Обводка:



Персональный web сайт


10. Выберите инструмент Линия (Line Tool) и нарисуйте разделительную линию на панели меню, расположенной на заголовке сайта:



Персональный web сайт


Персональный web сайт


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



Персональный web сайт


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



Персональный web сайт


12. Сделайте 2 копии созданного слоя и расположите их, как показано ниже. Разместите этот слой под слоем рамки.



Персональный web сайт


13. Теперь напишите названия кнопок меню, соблюдая нижеуказанные настройки:



Персональный web сайт


Персональный web сайт


14. Используя инструмент Линия (Line Tool), нарисуйте 3 горизонтальные раделительные полосы на панеле сайта, цветом #CBF08E.



Персональный web сайт


15. Напишите названия разделов сайта. Настройки для “lorem”:



Персональный web сайт


Настройки для “ipsum dolor”:



Персональный web сайт


Настройки для “blandit, consequat”:



Персональный web сайт


Настройки для “cursis ultrices, fringillla”:



Персональный web сайт


Персональный web сайт


16. Теперь необходимо заполнить разделы сайта соответствующим текстом. Настройки для “Sed diam nonummy”:



Персональный web сайт


Настройки для оранжевого подчёркнутого текста:



Персональный web сайт


Настройки для тёмного подчёркнутого текста:



Персональный web сайт


Настройки для “04.10.2007:”:



Персональный web сайт


Персональный web сайт


17. Создайте новый документ размером 21х21 px и разрешением 72 dpi и нарисуйте первичные элементы текстуры, белого цвета, инструментом Прямоугольник (Rectangle Tool) и поверните их в режиме Свободного трансформирования (Free Transform).



Персональный web сайт


Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор:



Персональный web сайт


18. Создайте новый слой (Create New Layer) и перейдите в меню Редактировать>Выполнить заливку (Edit>Fill) и настройте так:



Персональный web сайт


Персональный web сайт


19. Установите для слоя Режим наложения – Мягкий свет (Blending Mode – Soft Light) и Заливку (Fill) слоя — 40%.



Персональный web сайт


20. Создайте новый слой (Create New Layer). Выберите инструмент Карандаш (Pencil Tool) большого размера и нарисуйте вертикальную панель, расположенную на левой стороне, цветом #9E80E1 и сотрите ненужные элементы инструментом Ластик (Eraser Tool).



Персональный web сайт


21. Установите для слоя Режим наложения – Наложение (Blending Mode – Overlay).



Персональный web сайт


22. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте новый слой, предназначенный для названия сайта, на левой верхней части сайта и сотрите одну вершину инструментом Удалить точку привязки (Delete Anchior Point Tool).



Персональный web сайт


Персональный web сайт


23. Установите Заливку (Fill) слоя — 0% и примените для слоя стиль Наложение градиента
(Layer Style — Gradient Overlay).



Персональный web сайт


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



Персональный web сайт


24. Скопируйте последний слой и при помощи инструмента Удалить точку привязки (Delete Anchior Point Tool) сотрите вершину с каждого угла на правой стороне копии. Инструментом Свободное трансформирование (Free Transform) немного сместите правую стороне влево.



Персональный web сайт


Персональный web сайт


25. Установите Заливку (Fill) слоя — 0% и примените для копии стиль Наложение градиента (Layer Style — Gradient Overlay).



Персональный web сайт


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



Персональный web сайт


Обводка:



Персональный web сайт


26. Напишите название сайта, соблюдая нижеуказанные настройки:



Персональный web сайт


27. В режиме Свободного трансформирования (Free Transform) немного наклоните надпись и примените для неё стиль Внешнее свечение (Layer Style — Outer Glow):



Персональный web сайт


Персональный web сайт







Делаем Web-дизайн

Вас может также заинтересовать:

23 октября 2018

Случайно набрели на статью на женском сайте superstyle.ru по поводу выбора фотоаппарата. Вдруг пригодится. Но поскольку статья написана без особого углубления в реалии рынка - позволим себе кое-где комментарии

23 октября 2018

Дата анонса: 2009/08/19 Эффективное разрешение, МП: 12.1 Диагональ ЖК-дисплея, дюймы: 2.7 Вес с батареей и картой памяти, г: 285

23 октября 2018

Времена, когда количество моделей видеокамер высокой четкости (далее HD-видеокамеры, HD-видео) представленных на бытовом рынке можно было пересчитать по пальцам одной руки, уходят в прошлое — с началом 2007 года на рынок, как из рога изобилия, «посыпались» новые HD-видеокамеры, да в таком количестве, что теперь впору задуматься: а что же купить, и есть ли возможность использовать возможности новомодных форматов полностью? Для того чтобы ответить на этот вопрос и был задуман данный цикл статей, в первой части которого мы познакомимся с, собственно, видеокамерами высокого разрешения, представленными сейчас на бытовом рынке, а также с форматами видео, которые в них используются. И начнем мы именно с форматов.