Для того чтобы создать новый слой можно нажать Ctrl+Shift+N (в этом случае можно сразу задать ему имя, цвет иконки, свойство наложения на другие слои и Opacity), либо кликнуть по иконке расположенной рядом с иконкой “урны”. В этих двух случаях новый слой окажется над активным слоем. Если же зажать Alt и кликнуть по иконке создания нового слоя, то новый слой окажется ПОД активным слоем. Это иногда экономит лишнее движение мышью.

Кроме того, можно создать копию активного слоя (вместе с прозрачностями и стилями), просто нажав Ctrl+J, которая окажется над активным слоем. Если одновременно нажать Ctrl+Alt+J то можно опять же задать копии имя, цвет иконки, свойство наложения на другие слои и Opacity. Кроме того копию слоя можно создать перетащив его на иконку нового слоя.

Слои можно, а иногда и нужно для того чтобы лучше ориентироваться в них, объединять в папки, для того чтобы это сделать сначала нужно выделить необходимые слои. Выделяют слои с помощью мыши и клавиш Shift и Alt. Причем, с помощью Alt можно выделять слои по одному, а с помощью Shift – группой.

Выделив необходимые слои, нужно перетащить их на иконку папки, что находится второй справа внизу окна Layers. Вы можете прочитать еще на эту тему в статье “Три способа не потеряться в слоях”.

Несколько слоев и папок можно слить в один, для этого необходимо их выделить и нажать на комбинацию клавиш Ctrl+E. Кроме того, если вы выделили один слой и нажали на Ctrl+E то он сольется с тем что находится под ним. Но с этим нужно быть аккуратнее, потому что если не выделить слой со стилями, и слить его с верхним слоем, то стили не учитываются при этой операции.

Теперь к самому главному. Предположим у нас есть два слоя, на каждом из которых находится по фигуре.

Зажимаем Alt и кликаем точно между двумя слоями. У нас получилось, что верхний слой обрезался точно по нижнему.

Этот прием чем то похож на использование масок. Например тем что он поддерживает прозрачности и это очень удобно.

Эта статья написана по просьбе одного из читателей. Если вас интересуют какие-то вопросы или вам интересно почитать о чем то в рамках данного блога – не стесняйтесь, спрашивайте в комментариях или в письмах (контакты на странице об авторе). На всё вы получите ответ лично или новой статьей.

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

Маски задаются либо с помощью верхнего меню, либо третьей иконкой слева внизу окна Layers. В верхнем меню можно выбрать Layer > Layer Mask либо Layer > Vector Mask. В первом случае маску можно нарисовать кистью (Brush Tool) либо карандашом (Pencil Tool), причем не важно, каким цветом, рисунок будет монохромным и будет влиять на прозрачность каждого пикселя.

Во втором случае маска рисуется векторными инструментами, такими как Pen Tool либо инструментами векторной формы.

Эти маски отвечают за прозрачность того или иного пикселя слоя и ими соответственно можно задавать форму изображения.

Есть и другой тип масок, он позволяет использовать свойства, которые обычно находятся в меню Image > Adjustments. Для того чтобы их активировать нужно воспользоваться четвертой иконкой слева внизу окна Layers. Как видно на иллюстрации там довольно много различных свойств.

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

Эта была вторая статья про работу со слоями. Следующая, завершающая, выйдет на будущей неделе. Чтобы не пропустить — подпишитесь на RSS.

Все слои можно увидеть в специальном окне Layers, которео обычно располагается справа внизу открытого окна фотошопа. Если же его нет, его всегда можно вызвать с помощью верхнего меню Window > Layers, либо клавишей F7.

Начнем с простого. Создадим документ (Ctrl+N). Помимо размеров нашего будущего документа, мы можем задать каким будет его первый слой. В зависимости от того выберите вы White, Background Color или Transparent первый слой будет белый, дополнительного цвета или прозрачный, причем в первых двух случаях этот слой будет закрытым, то есть вы не сможете его двигать в пределах документа, вырезать из него что либо (вырезанная часть всегда окрасится дополнительным цветом).

Чтобы открыть слой, который автоматически получает название Background, есть два способа, по сути выполняющие одно и то же действие. Первый – щелкнуть по слою правой кнопкой мыши выбрать самый первый пункт Layer From Background…

Второй – мышью перетащить иконку “замка” на иконку “урны”. Какой способ вам проще и удобнее – решайте сами, они идентичны.

Все действия которые можно производить со слоем можно опять запретить или разрешить с помощью иконок в верху окна Layers.

Дальше стоит отметить, что все операции которые мы хотим провести со слоем могут с ним произойти только в том случае если он отмечен, отметить его можно просто щелкнув по нему левой кнопкой мыши. Давайте отметим наш единственный слой и посмотрим что мы можем с ним сделать. Слою можно задать стили, такие как различные тени, объем, градиент и обводки. Для того чтобы вызвать меню стилей слоя можно либо два раза быстро щелкнуть по слою левой кнопкой мыши, либо вызвать его нажатием иконки c изображением букв Fx. После применения стиля информация о нем сохраняется на слое. В данном случае изменен цвет заливки слоя.

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

Теперь рассмотрим параметры Opacity и Fill сверху у окна со слоями. Они по сути задают один и тот же параметр – прозрачность слоя. Но есть одно важное отличие. Opacity действует на весь слой и его стили, задавая им общую прозрачность. В то же время как Fill действует ТОЛЬКО на слой, не затрагивая стили слоя. Это иногда удобно использовать, например задавая обводку предмету, но скрывая сам предмет (именно таким способом сделанный прозрачные овалы с красной границей в этой статье).

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

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

Все эти иконки легко нарисовать на небольшом поле размерами 16*16 пикселей. Для того чтобы не ошибиться с границами, давайте сделаем для себя выделение, равное по своим размерам квадрату 16*16, с помощью инструмента Rectangular Marquee Tool (клавиша M).

Для того чтобы рисовать пиксельные иконки нам понадобится кисть размером в один пиксель. Лучше всего для этих целей подойдет инструмент Pensil Tool (клавиша B). Выбираем этот инструмент, нажимаем правую кнопку мыши и как показано на изображении выбираем размер пера равным одному пикселю.

Рисовать пиксельную иконку мы будет на отдельном слое (Shift+Ctrl+N), для того чтобы потом ее можно было легко скопировать и перекрасить, при необходимости. Отмечаем на новом слое выделение 16*16 и для того чтобы нам было удобнее рисовать увеличиваем видимую область поля примерно до 800% — 1600% видимости, с помощью нескольких нажатий сочетания клавиш ctrl и +. Все готово.

Далее нашей кистью-карандашом просто рисуем нужные иконки, это просто. Несколько замечаний: чтобы быстро посмотреть что получилось нужно несколько раз нажать Ctrl и — до видимости в 100%, а потом обратно Ctrl и +; чтобы отменить последнее действие – нажать Ctrl+Alt+Z; чтобы быстро стереть все просто нажать Delete.

Вот что получилось

Или в обычном размере.

Shift +N – новый документ;

Shift+Ctrl+N – новый слой;

Ctrl+J – продублировать слой;

Ctrl+E – слить два слоя в один;

Shift+Ctrl+E ослить всех видимые слои в один;

Alt+Backspace – залить область основным цветом;

Ctrl+Backspace – залить область цветом фона;

Ctrl+Enter – сделать выделение маски слоя;

Ctrl+T – трансформация слоя или выделенной области;

Ctrl+F – использовать предыдущий фильтр еще раз;

Q – включить/выключить режим маски;

клавиши стрелок – при включенном инструменте перемещения, передвижение объекта на один пиксель в указанном направлении;

Alt+клавиши стрелок – при включенном инструменте перемещения, передвижение объекта на один пиксель в указанном направлении и копирование слоя;

Ctrl+Shift+клавиши стрелок – при включенном инструменте перемещения, передвижение объекта на десять пикселей в указанном направлении;

Ctrl +Z – чтобы отменить последнее действие;

Ctrl+Alt+Z – чтобы отменить несколько действий;

Ctrl+S – сохранить;

Shift+Ctrl+S – сохранить как…;

Shift+Ctrl+Alt+S – сохранить для размещения в сети;

Ctrl и +, Ctrl и — – увеличение/уменьшение видимой области листа;

Пробел + мышь – двигать лист в окне;

Возможно, это далеко не все часто используемые сочетания, поэтому, если у вас есть дополнения или замечания, прошу писать комментарии! Список будет пополняться.

Одним из главных требований к графическим элементам является их объем: чем он меньше, тем лучше. Даже сейчас, в век высоких скоростей интернета важно чтобы ваш сайт быстро загружался: это удобно для пользователя (человек может зайти на ваш сайт, в том числе и с телефона) и это любят поисковики.

Допустим, вы уже подготовили и нарезали дизайн и теперь нужно сохранить каждый элемент с минимальными размерами. Обычные Save (Ctrl+S) и Save as… (Shift+Ctrl+S) тут не подойдут, у них нет возможности управления сохранением. Здесь нужно использовать Save for Web (Alt+Shift+Ctrl+S). Нажав клавиши, вы увидите панель сохранения. В левой нижней ее части можно увидеть, какой объем будет у сохраняемого изображения, и его формат.

Всего форматов сохранения для веба пять: GIF, JPG, PNG-8, PNG-24 и WBMP. Последний практически не используется.
Важно помнить, что Internet Explorer 6 не поддерживает формат PNG-24 и сохранять в этом формате при условии, что в верстке будут использованы специальные хаки для этого формата.

Настройки для форматов GIF и PNG-8 очень похожи, и главным фактором, влияющим на объем конечного файла, является количество используемых цветов. Чем меньше цветов – тем меньше объем. Выбирая количество цветов, стоит следить, чтобы конечный файл в итоге не имел значительных визуальных дефектов.

Для сохранения достаточно однородных рисунков или градиентов иногда полезно использовать настройки перемешивания.

Файлы формата GIF и PNG-8 имеют возможность сохранять прозрачность (но не альфа каналы). Чтобы сохранить прозрачность, нужно отметить галочку Transparency.

Настройки для формата JPG состоят в основном из настройки качества изображения (оно же сжатие) в процентах. Наиболее приемлемым является сжатие 80%, файлы получаются хорошего качества и небольшого объема. Но в каждом отдельном случае нужно смотреть по ситуации.

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

Для PNG-24 нет каких-то особых настроек, которые бы могли влиять на объем, потому что этот формат хранит изображение в наиболее высоком качестве.

Если говорить о том, какие форматы для чего лучше подходят, то можно сказать, что в JPG лучше всего хранить объемные файлы фона сайта и фотографий для публикаций, в GIF и PNG-8 – элементы дизайна, которые имеют небольшой объем, но нуждаются в хорошем качестве; то же самое можно сказать и о формате PNG-24, но нужно помнить об IE6, пока он еще не канул в лету.

Градиенты в фоне и отдельных блоках сайта можно использовать практически любые. Важно только помнить о том, что при верстке ваш градиент может быть слишком “тяжелым”. Например если использовать в фоне сайта вертикальный либо горизонтальный градиент, пусть даже сложный и многоцветный – его всегда можно сжать по вертикали или горизонтали, для того чтобы файл с ним занимал небольшой объем. Примеры таких градиентов и полос, в которые можно их сжать, на иллюстрациях. Верстальщику будет очень удобно сделать полосу толщиной в 1 пиксель с таким градиентом.

Если же градиент проходит под углом, то сделать файл фона толщиной в 1 пиксель не удастся. Это приведет к тому, что файл фона будет объемным, что иногда не допустимо. Одно дело, когда градиент выходит из угла и простирается на небольшое расстояние. Такой макет решается очень просто – вырезается кусок градиента, где идет изменение цвета, и бэкграундом вставляется в фон, все незанятое место заливается одним цветом.

Другое дело, когда фон состоит из нескольких градиентов – такой фон заверстать без больших файлов очень сложно и иногда нецелесообразно. Потому их лучше избегать.

Кроме того, всегда нужно помнить о том, что веб сайт – не статичный лист бумаги, размеры окна браузера на разных компьютерах могут быть разными, и это нужно учитывать как в дизайне в целом, так и в создании градиентного фона в частности. Начиная рисовать дизайн, выберите большой размер полотна, шириной не менее 1900 пикселей. А свой градиент стройте таким образом, чтобы у краев он переходил в однородный цвет, как по бокам так и внизу экрана, таким образом что градиент можно будет “прилепить” по середине и к верху.
Конечно, могут быть случаи, когда градиент, да и весь дизайн, будет “липнуть”, например, к правому краю, это тоже нужно учитывать сразу, либо исправлять по мере создания дизайна.

На градиенты в плашках и кнопках не существует особых ограничений в виду того что они обычно не большого размера и файл с их фоном не будет иметь большой объем.

Градиентные тексты допустимы только в том случае, если это заголовки, и то для того чтобы написать заголовок градиентом, его придется верстать картинкой, а не текстом. Поэтому заголовки статей в блогах, новостей и всего что часто меняется градиентом рисовать нельзя, такой дизайн осуществить технически не удастся. Заголовок этого блога нарисован в градиенте, но каждая его статья содержит обычный одноцветный заголовок.

Случай первый: перекрашиваем прямоугольник. Допустим, у нас есть прямоугольник на отдельном слое. Для начала нам нужно выделить его. Для этого зажимаем ctrl и щелкаем мышью по слою с прямоугольником, по миниатюре.

Теперь выбираем нужный цвет в панели инструментов. Чтобы одним движением без инструмента заливки перекрасить прямоугольник, нажимаем Alt+Backspace. На панели инструментов поле выбора цвета разбито на два участка – основной и дополнительный (фоновый). Alt+Backspace заливает основным цветом, если же нужно залить выделение дополнительным – нажимаем Ctrl+Backspace.

Но этот способ хорошо работает только в случае, если объект для перекрашивания имеет четкие границы по пикселям: прямоугольник, квадрат, линия. Если мы таким образом перекрасим круг, то границы круга получится в виде лесенки, особенно это будет заметно если перекрашивать несколько раз. На изображении круги увеличены в два раза.

Как же поступать с кругом? Пусть у нас есть круг на отдельном слое. Создаем пустой слой над ним и через Ctrl+Backspace закрашиваем его в тот цвет, в который нужно покрасить круг.

Теперь зажимаем Ctrl и щелкаем мышью между слоем с кругом и слоем, залитым нужным цветом. Готово.

Кроме этого есть еще один способ перекрасить слой – с помощью Layer Style. Для этого щелкаем два раза по слою с кругом, на панели Layers. Появляется окно Layer Style. И в пункте Color Overlay выбираем нужный цвет.

Готово.

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

Для начала откроем новый документ с серым (#CCCCCC) фоном и нарисуем белый прямоугольник на новом слое.

Самое простое – построить тень с помощью Layer Style. Правой кнопкой мыши два раза кликаем по слою с прямоугольником в панели Layers и выставляем значения стиля Outer Glow как показано на изображении.

В итоге должно получиться следующее. Получилась тень вокруг всего прямоугольника.

Теперь попробуем поставить тень так, как будто бы наш прямоугольник чуть отстает своей средней частью от общей плоскости. Точно так же открываем новый документ и на новом слое рисуем прямоугольник. Копируем слой с прямоугольником и перетаскиваем его между слоем с фоном и оригиналом. Затем выключаем в панели Layers видимость первого слоя. Применяем к копии трансформацию (Ctrl+T) и вводим в верхней панели свойств трансформации 50% для ширины (W).

Жмем Enter. Теперь применяем фильтр размытия по горизонтали (Filter>Blur>Motion Blur).

Применяем еще один фильтр размытия, но теперь уже по Гауссу (Filter>Blur>Gaussian Blur).

Применяем к этому слою Layer Style, а именно Color Overlay, чтобы перекрасить слой в серый цвет (#808080).

Затем включаем первый слой.

Теперь попробуем сделать тень для того чтобы казалось будто отогнут угол прямоугольника. Вновь открываем документ, рисуем на новом слое прямоугольник, а затем делаем его копию и перетаскиваем копию под оригинал. Теперь выбираем инструмент Move Tool (клавиша V) и сдвигаем копию чуть вниз (если выделить слой с копией в панели Layers и нажать shift + стрелка вниз, то прямоугольник сместится ровно на 10 пикселей вниз, что нам достаточно; если не зажимать shift, а просто нажимать стрелки, прямоугольник будет перемещаться на 1 пиксель). Теперь выбираем инструмент трансформации (Ctrl+T) и меняем свойства трансформации на Skew (Edit>Transform>Skew) и сдвигаем нижний верхний угол с помощью мыши чуть вверх.

Жмем Enter. Теперь переходим в режим редактирования масок (клавиша Q) и рисуем градиент с помощью инструмента Gradient Tool (клавиша G) так, как на изображении.

Выходим из режима редактирования масок (клавиша Q). Получается выделение. Нажимаем клавишу Delete – часть слоя с копией исчезает. Нажмем клавишу M и кликнем инструментом выделения в любой части поля, чтобы выделение исчезло. Применяем к нему размытие по Гауссу (Filter>Blur>Gaussian Blur), а затем применяем к этому слою Layer Style, а именно Color Overlay, чтобы перекрасить слой в серый цвет (#808080).

Откроем новый документ (ctrl+N) с серым (#E6E6E6) фоном.

Создаем новый слой (ctrl+shift+N). Затем выбираем инструмент выделения области (клавиша M), в верхнем выпадающем меню Style выбираем Fixed Size и подставляем значения для Width и Height 270 и 30 соответственно. Кликаем по изображению – появляется прямоугольное выделение, которое заливаем чисто белым цветом. Затем зажимаем Shift и четыре раза нажимаем клавишу “вниз”. Таким образом наше выделение в том же слое спустилось на 40 пикселей вниз. Вновь заливаем белым, снова спускаемся на 40 пикселей вниз и опять заливаем белым. Это будут поля для ввода имени, почты и сайта.

Затем устанавливаем размеры выделения Width и Height 440 и 270 соответственно, спускаемся на 10 пикселей от нижнего белого прямоугольника и вновь заливаем белым. Это будет поле для ввода текста.

Кликаем два раза по слою с белыми полями в панели Layers так чтобы открылось окно Layers Style. Выставляем там значение как показано на изображениях.

После чего должно получиться следующее.

Далее создаем новый слой (ctrl+shift+N). Выбираем выделение (клавиша M). Рисуем прямоугольник с размерами 440 на 30 на расстоянии 10 пикселей от поля для ввода текста и заливаем его цветом #CCCCCC. Открываем Layers Style и выставляем значения как на изображениях.

Получаем форму для ввода текста, которую нужно немного облагородить. Для начала расставим текст: подпись к полям и текст на кнопку отправки сообщения.

Здесь для текста применен Layers Style как на изображении.

И наконец, в поля ввода имени, почты и сайта вставлены иконки, их можно найти в PSD файле. Как рисовать такие иконки можно будет узнать в одной из ближайших статей, чтобы не пропустить – подпишитесь на RSS.