Веб-мастерская Ларисы ВоронинойPhotoshop для WEB-дизайна.
WEB-мастерская Ларисы Ворониной logo

Photoshop для WEB-дизайнера. Сен 14 2016

Photoshop для web-дизайнера является пожалуй самым основным инструментом. Если вы только начинаете осваивать web-дизайн, вам совсем не обязательно владеть программой в совершенстве, но кое-что знать нужно.

Ну для начала нужно настроить программу под себя. 

 


Настраиваем Photoshop для web-дизайнера.

Редактирование -> настройки -> основные, или  ctrl+k:
nastrojka Photoshop dlya web dizajnera
Во вкладке «интерфейс» выставляем всё как на картинке:

nastrojka Photoshop dlya web dizajnera

т.е. убираем все границы.

Во вкладке «производительность» историю действий выставляем  побольше, например 60, рабочий диск лучше выбрать D.

nastrojka Photoshop dlya web dizajnera
Во вкладке «единицы измерения» везде ставим пиксели.

nastrojka Photoshop dlya web dizajnera

А почему собственно пиксели? Всё очень просто, в web-пространстве всё измеряется в пикселях, а не в сантиметрах или дюймах, Photoshop для web-дизайнера в этом плане всё предусмотрел.


Создаём рабочую среду в Photoshop.

Под рабочей средой понимается набор инструментов, которыми вы будете пользоваться постоянно.Для работы над web-дизайном нам понадобятся следующие окна:  слои, история и символ. Открываются они следующим образом:

окно -> слои, окно -> история, окно -> символы

nastrojka Photoshop dlya web dizajnera

Таким же образом можете добавить и другие нужные вам окна.
Чтобы окна выглядели как одно, берём одно окно и тянем за верхнюю панель левой кнопкой мыши к верхней панели другого окна.

nastrojka Photoshop dlya web dizajnera
Сохраняем нашу рабочую среду:

окно -> рабочая среда -> новая рабочая среда, 

даём ей имя и нажимаем кнопку «сохранить».

 


Изучаем инструменты Photoshop для web-дизайнера.

Создание нового документа:

файл -> создать, или Ctrl+N.

В открывшемся окне выставляем параметры в зависимости от нашей цели, примерно так:

nastrojka Photoshop dlya web dizajnera

Или в поле «набор» можем выбрать пункт «заказная» и выставить свои размеры.

Сохранение документа.

Чтобы сохранить созданный документ, в нашем случае это макет сайта, поступаем следующим образом:

файл -> сохранить как,

в открывшемся окне даём имя документу, например "макет сайта", тип файла выбираем Photoshop (*.PSD;*.PDD) и нажимаем кнопку "сохранить".
Чтобы сохранить отдельную картинку для сайта делаем так:

файл -> сохранить для WEB.

Выставляем нужный нам формат, как правило, это либо JPEG, либо PNG (PNG используется для картинок с прозрачным фоном).
Чтобы сохранить отдельный блок из макета делаем следующие действия: берём инструмент «раскройка», выделяем блок (кнопку, картинку, логотип), далее

файл -> сохранить для WEB,

в открывшемся окне выставляем нужные параметры, нажимаем кнопку сохранить и появляется вот такое окно:
nastrojka Photoshop dlya web dizajnera
Если мы хотим сохранить только выделенный объект, то делаем как на рисунке и нажимаем кнопку сохранить.
Помните, что размер файла не должен превышать 100КБ, оптимальный размер 50-60КБ, иначе он будет тормозить работу сайта.

Линейки, направляющие.

Для создания макета сайта всегда используйте линейку и направляющие. В программе Photoshop для web-дизайнера это как раз предусмотрено.
Направляющие нужны для того, чтобы чётко отрисовывать все блоки сайта, кнопки, меню и т.д.
Линейка включается с помощью горячих клавиш Ctrl+R, или

просмотр -> линейки.

Направляющие создаются путём перетаскивания левой кнопкой мыши от линейки либо слева, либо сверху (с первого раза может не получиться, потренируйтесь).Отключать и включать уже созданные направляющие можно с помощью горячих клавиш Ctrl+;.

Слои.

Макет сайта всегда состоит из множества слоёв, которые помещены в отдельные папки. Выглядит это примерно вот так:
nastrojka Photoshop dlya web dizajnera
В папке «шапка» находятся все слои, которые относятся к шапке сайта, и т.д.
В папках могут находиться другие папки, которые будут содержать в себе слои.
Чтобы создать новую папку, жмём сюда:
Окна Photoshop
Чтобы создать новый слой жмём сюда:
nastrojka Photoshop dlya web dizajnera
Чтобы переименовать слой или папку, щёлкаем два раза левой кнопкой мыши по названию слоя или папки и переименовываем.
Чтобы удалить слой или папку, щёлкаем правой кнопкой мыши по слою или папке и выбираем пункт меню «удалить слой/группу».
Чтобы скопировать слой, делаем похожие действия, только выбираем пункт «создать дубликат слоя/группы».
Слои и папки можно менять местами путём перетаскивания.

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

Итак, нажимаем на стрелку в левом верхнем меню, выбираем "слой" и ставим галочку "автовыбор".

nastrojka Photoshop dlya web dizajnera

Стили.

Стили добавляются вот здесь:
nastrojka Photoshop dlya web dizajnera
С остальными инструментами и приёмами мы познакомимся  на примерах в следующих уроках.

При создании WEB-дизайна сайта в Photoshop советую придерживаться правил стиля WEB 2.0


Рейтинг@Mail.ru