Дизайн Web-сайта Adobe Photoshop CS2

Введение.

WEB-Дизайн - это дизайн, который вы сами легко сможете сделать для своего будущего сайта. Именно это меня заинтересовало. Столкнувшись с понятием дизайн впервые в интернете (пример из личного опыта), человек, насмотревшись на оформление страниц, и изучив несколько трюков с графическими редакторами, начинает воспринимать дизайн, как нечто не слишком сложное, являющееся исключительно делом вкуса. Казалось бы, чего проще, освоить графический редактор, получить новую непыльную профессию, и начать зарабатывать деньги. К сожалению, такое заблуждение свойственно многим людям, которым надоела их работа, а кажущаяся легкой перспектива смены профессии на дизайнера может оказаться весьма соблазнительной. Но это только кажется, на самом деле все не так просто. Под веб-дизайном понимают не только создание графических элементов для сайта, но и проектирование его структуры, навигации, то есть создание сайта целиком.

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

Под дизайном сайта мы понимаем не просто шаблон — баннер вверху, меню вверху, слева и внизу — а полное оформление страниц web-сайта. Размещение информации на web-сайте должно быть продумано и соответствующим образом оформлено. Именно поэтому web-дизайнер должен не только уметь хорошо рисовать и иметь правильное цветоощущение, но и уметь смотреть на свое творение глазами посетителя web-сайта.


Дизайн Web-сайта Adobe Photoshop CS2

(Абстрактный фон)

Начнем работу с создания нового документа (Ctrl+N) в Adobe Photoshop, размером 1920px*1200px (RGB цветовой режим) при разрешении 72 пикс. Используем инструмент Заливка (Paint Bucket Tool) (G), чтобы заполнить цветом #242678 новый фоновый слой.

 

 

Создадим новый слой (Ctrl + Shift + N) и активируем мягкую круглую Кисть (Brush).

 

Используем эту кисть, чтобы немного затемнить документ на его верхней правой стороне и на левой нижней. Цвет Кисти (Brush) черный #000000 (Непрозрачность (Opacity) кисти 15% ).

 

 

 

Далее постараемся начертить несколько небольших кругов. Используем инструмент Эллипс (Ellipse Tool) (U) цветом #FF6C00, чтобы нарисовать следующий эллипс.

 


Установим Заливку (Fill) на 13% для этого слоя и щелкаем на иконку Добавить стиль слоя (Add a layer style) в нижней части панели слоев и выбираем Тень (Drop Shadow):

 

 

 

 

Получили следующий результат.

 


Далее сделаем несколько копий последнего сделанного круга (Ctrl + J). Выбираем команду Свободное трансформирование (Free Transform) (Ctrl+T), чтобы уменьшить каждую копию по очереди и разместить их как на картинке ниже.

 

 

Создадим новый слой (Ctrl + Shift + N) и выберем мягкую круглую Кисть (Brush Tool) (B).

 


Используем эту кисть для раскраски кругов, расположенных с левой стороны. Цвет Кисти (Brush) #FEAC00 и Непрозрачность (Opacity) - 40%.

Установим Режим смешивания (Blend Mode) для этого слоя на Перекрытие (Overlay).

Используя тот же Эллипс (Ellipse Tool) (U), нарисуем еще несколько кругов на разных слоях. Их цвет - #FFCDCD. Установим Заливку (Fill) на 10% для этих слоев.

Объединим в группу все слои, содержащие розовые круги (зажмите CTRL выберите необходимые слои, затем удерживаем левую кнопку мыши во время перетаскивания выбранных слоев на иконку Создать новую группу (Create a new group) в нижней части панели слоев).

Установим Заливку (Fill) на 0% для группы и щелкнем на иконку Добавить стиль слоя (Add a layer style) в нижней части панели слоев. Выберу Наложение градиента (Gradient Overlay):

 

 

Щелкнем по цветовой панели, чтобы открыть Редактор Градиентов (Gradient Editor). Установим цвета, как показано на рисунке ниже. Нажмите OK, чтобы закрыть диалоговое окно Редактор Градиентов (Gradient Editor).

 


Получили следующий результат.

 

Добавим Маску слоя (Layer mask) для группы, нажав на иконку Добавить маску слоя (Add layer mask) в нижней части панели слоев. Затем выберу мягкую круглую Кисть (Brush) черного цвета #000000.

 


Рисуем на маске с помощью этой кисти, чтобы скрыть левый край кружков, как показано на картинке ниже.

С помощью Эллипса (Ellipse Tool) (U) будем продолжать рисовать круги, так же, как делали ранее. Цвет - #FFCDCD. Установим Заливку (Fill) на 0% для этих слоев. Каждый круг, должен быть на отдельном слое.


Соберем все созданные круги в группу. Установим Заливку (Fill) на 0% для группы и щелкнем на иконку Добавить стиль слоя (Add a layer style) в нижней части панели слоев. Выберу Наложение градиента (Gradient Overlay):

 

Щелкнем по цветовой панели, чтобы открыть Редактор Градиентов (Gradient Editor) и установим цвета как показано на рисунке ниже. Нажмем OK, чтобы закрыть диалоговое окно Редактор Градиентов (Gradient Editor).

 

 


Получили следующий результат.

 

Сделаем копию группы, которая у нас есть и выберу команду Свободное трансформирование (Free Transform) (Ctrl+T), чтобы уменьшить каждый экземпляр. Разместим их как на картинке ниже. Установим Заливка (Fill) 0% для группы и щелкнем на иконку Добавить стиль слоя (Add a layer style) в нижней части панели слоев. Выберу Наложение градиента (Gradient Overlay):

 


Щелкнем по цветовой панели, чтобы открыть Редактор Градиентов (Gradient Editor) и установим цвета как показано на рисунке ниже. Нажмите OK, чтобы закрыть диалоговое окно Редактор Градиентов (Gradient Editor).

 

 

Получили следующий результат.

 

 


Создадим еще одну группу кругов, как делали это выше. Используя все тот же Эллипс (Ellipse Tool) (U), цвет кругов как в предыдущей группе.

 

 

Установим Заливка (Fill) на 0% для гуппы, и щелкнем на иконку Добавить стиль слоя (Add a layer style) в нижней части панели слоев, выберу Наложение градиента (Gradient Overlay):

 


Щелкнем по цветовой панели, чтобы открыть Редактор Градиентов (Gradient Editor) и установим цвета как показано на рисунке ниже. Нажмите OK, чтобы закрыть диалоговое окно Редактор Градиентов (Gradient Editor).

 

 

Получили следующий результат.

 

 


Далее создадим последнюю группу кругов, используя Эллипс (Ellipse Tool) (U) и цвет #FFCDCD. Каждый круг должен быть на отдельном слое. Установим Заливку (Fill) на 10% для этой группы.

 

 

Объединим в группу все слои, содержащие круги (зажмите CTRL выберу необходимые слои, затем удерживаем левую кнопку мыши во время перетаскивания выбранных слоев на иконку Создать новую группу (Create a new group) в нижней части панели слоев). Установим Заливка (Fill) 0% для группы, и щелкнем на иконку Добавить стиль слоя (Add a layer style) в нижней части панели слоев, выберу Наложение градиента (Gradient Overlay):

 

 

Щелкнем по цветовой панели, чтобы открыть Редактор Градиентов (Gradient Editor) и установим цвета как показано на рисунке ниже. Нажмите OK, чтобы закрыть диалоговое окно Редактор Градиентов (Gradient Editor).

 

 

Получили следующий результат.

 

 

Создадим новый слой (Ctrl + Shift + N) и активируем мягкую круглую Кисть (Brush Tool) (B).

 

 

Используем эту кисть для рисования фона, в правом нижнем углу документа. Цвет Кисти (Brush) #99FF00 и Непрозрачность (Opacity) - 15%.

 

 

 


Установим Режим смешивания (Blend Mode) для этого слоя на Перекрытие (Overlay).

 

 

Убедимся, что слой, содержащий кисть активен в панели слоев и выберу для слоя следующую команду Изображение-> Внешний канал (Image-> Apply Image).

 

 


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

 

 

Создадим новый слой (Ctrl + Shift + N) и активируем мягкую круглую Кисть (Brush) белого цвета #ffffff Непрозрачность (Opacity) - 40%.

 

 


Используя эту кисть, чтобы закрасить круги, так же как продемонстрировано на следующем изображении.

 

 

Установим Заливка (Fill) 57% и измените Режим смешивания (Blend Mode) на Перекрытие (Overlay).

 

 


Нажмем на иконку Создать новый корректирующий слой или слой заливку (Create new fill or adjustment layer) в нижней части панели слоев и выберу Кривые (Curves) для регулировки формы кривой, как показано, чтобы сделать некоторые корректировки цвета.

 

 

Получили следующий результат.

 

 


Нажмем на иконку Создать новый корректирующий слой или слой заливку (Create new fill or adjustment layer) в нижней части панели слоев и выберу Вибрация (Vibrance) для улучшения общего цвета изображения.

 

 

Получили следующий результат.

 

 

Теперь нужно объединить в группу все наши слои (зажмите CTRL выберу необходимые группы, затем удерживаем левую кнопку мыши при перетаскивании выбранных групп на иконку Создать новую группу (Create a new group) в нижней части панели слоев).

 

Выберу группу, в панели слоев и нажмем Ctrl+E чтобы Объединить слои (Merge Down). На растрированный слой который получился, нужно применить следующий фильтр: Фильтр-> Резкость-> Контурная резкость (Filter-> Sharpen-> UnSharp Mask).

 

 

Получили следующий результат.

 

 

Наш абстрактный фон готов!