9 заметок с тегом

photoshop РСС

Ускоряем работу в Photoshop с помощью экшенов

27 апреля 2012, 11:40

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

1. Настраиваем включение / отключение слоев с сеткой при помощи горячих клавиш.
Итак, открываем файл для рисования макетов. Сетка в нем уже есть и в моем случае находится в группе слоев «grid-980». Отключаем видимость этой группы слоев.



Далее, создаем новый экшен. Назовем его к примеру Show Grid.
Выбираем папку в которой он будет храниться, у меня это папка My Work Action.
Назначаем функциональную клавишу... я назначу F1, и нажимаем кнопку Record.



Убедитесь что в палитре слоев выбран какой-нибудь любой слой кроме группы слоев с сеткой, например выберите слой Background. Если этого не сделать, то экшены создадутся неправильно, они будут применяться к текущему выбранному слою, а не конкретно к группе слоев с сеткой.
Включаем нашу группу слоев с сеткой и нажимаем кнопку Stop в панели Action.

Аналогично подготовим второй экшен, который будет отключать сетку.
Создаем экшен с названием Hide Grid и назначаем функциональную клавишу F2.
Выключаем группу слоев с сеткой и нажимаем Stop.

Теперь очень удобно включать и выключать сетку используя клавиши F1 и F2. Вам больше не придется искать сетку в огромном количестве слоев макета.

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

2. Настраиваем сохранение выбранного слоя или группы слоев в отдельный файл при помощи горячих клавиш.
Очень часто приходится сохранять всякие мелкие изображения в макетах сайтов, к примеру стрелочки возле списков, фоновые изображения для кнопок, различные иконки и картинки. Я всегда использовал для этих целей инструмент Slices, делал нарезку, отключал ненужные фоновые слои, если была необходима прозрачность для изображений, и сохранял с помощью диалога Save for Web. Это всегда занимало много времени и я думал, как можно облегчить и ускорить эти действия...
Описанный далее экшен существенно сокращает время на выполнение этих операций.

Итак, открываем какой-нибудь макет сайта или просто файл с несколькими слоями. Выделяем слой или группу слоев в палитре Layers.
Создаем новый экшен, назовем его к примеру Save Image и назначим горячую клавишу F3.
Далее нажимаем правой кнопкой на группу выделенных слоев и выбираем пункт «Duplicate Group...»



В открывшемся диалоге выбираем Document: New и нажимаем кнопку OK.

Создастся новый документ с текущей группой слоев. Далее идем в меню Image, выбираем пункт Trim, в диалоговом окне нажимаем ОК.

Теперь идем в палитру Action, нажимаем кнопку в верхнем правом углу и выбираем пункт
Insert Menu Item...



Выбираем в меню File пункт Save for Web & Devices. После этого нажимаем ОК в диалоговом окне.

Далее снова идем в палитру Action, нажимаем кнопку в верхнем правом углу и выбираем пункт Insert Menu Item... Опять идем в меню File и выбираем пункт Closed

Нажимаем ОК и останавливаем запись экшена.

Теперь чтобы сохранить любой слой или группу слоев в отдельный файл нам достаточно нажать F3, после чего откроется диалог сохранение изображения для web. Очень удобно и экономит кучу времени.

Дизайн сайта Салона красоты Натальи Владыкиной

19 января 2012, 8:12

Сайт для Североуральского салона красоты.
Необходимо было сделать яркий дизайн с тёмным фоном. Верстать подобный макет пожалуй сложновато, образы в круге будут меняться, необходимо делать круглую png маску над ними.
Дизайн этого сайта отличается от всего, что я делал в последнее время. Попробовал себя в другом стиле, так сказать...)
Дизайн сайта Салона красоты Натальи Владыкиной

Сайт ДенСим — Урал

5 сентября 2011, 0:18

Сайт для Информационного центра «ДенСим — Урал».
Довольно сложно было работать с заказчиком, но иногда такой опыт тоже полезен)
Несколько вариантов в процессе...

Сайт ДенСим - УралСайт ДенСим - Урал

Ретушь фотографии девушки.

Сайт ДенСим - УралСайт ДенСим - Урал

Вот что получилось в итоге:

Сайт ДенСим - Урал

Адрес сайта: http://student-holding.ru/

Сложный фон фотографии и цветокоррекция

4 сентября 2011, 20:48

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

Фотка была вот такая:

Сложный фон фотографии и цветокоррекция

После моих манипуляций, вот что получилось...

Сложный фон фотографии и цветокоррекция

С тенями как обычно у меня проблемы, но я учусь)

Тени тени тени...

4 сентября 2011, 20:38

Для меня довольно сложно рисовать тени... Но в техдизайне без умения рисовать тени — никак...
Вот что получилось у меня с кубиком...Тени тени тени...

Воздушный шарик :)

4 сентября 2011, 20:33

Решил немного порисовать в фотошопе. Вот что получилось. Рисовал по уроку с сайта makepizdato.
Воздушный шарик

Продающая листовка

4 сентября 2011, 19:58

Захотелось поменять свой инструмент на что-то другое. Этот меня в принципе всем устраивал, но хотелось чего-то нового. Пришла в голову мысль сделать продающую листовку, за одно в дизайне потренироваться. Вот что из этого получилось.

Продающая листовка


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

Отрисовываем яблоко в Photoshop

4 сентября 2011, 19:32

Решил поэкспериментировать) Photoshop изучаю уже давно, рисую макеты сайтов, рекламные листовки, ретуширую фотки, но ничего подобного делать ещё не пробовал. Появилась свободная минутка :)

Нашёл первую попавшуюся фотку яблока на yandex. Вот такую...

Отрисовываем яблоко в Photoshop

Сначала обводим контуры яблока, листочка и палочки. Я использовал инструмент перо (P). Создаём 3 слоя и делаем заливку контуров. Получается что-то вроде этого...

Отрисовываем яблоко в Photoshop

Далее начинаем работать над текстурой яблока. Создаём поверх слоя с контуром яблока новые слои в режиме alt-клик и при помощи кисти с мягкими краями начинаем придавать яблоку текстуру, рисуем тени и блики. Получается что-то вроде этого.

Отрисовываем яблоко в PhotoshopОтрисовываем яблоко в Photoshop

Далее остаётся поработать ещё немного с тенями и бликами, а также с текстурой палочки и листочка. В результате получаем...

Отрисовываем яблоко в Photoshop

Ну и для сравнения последнее изображение)

Отрисовываем яблоко в Photoshop

Настраиваем Photoshop и экономим своё время

4 сентября 2011, 19:25

С некоторых пор мне всё больше и больше приходится рисовать макеты сайтов в Photoshop, да и не только сайтов... Раньше я не задумывался об удобстве расположения панелей и палитр, а ведь это очень важно.
Стоит один раз всё правильно настроить чтоб потом сэкономить драгоценные рабочие минуты и часы...

Настраиваем Photoshop и экономим своё время


На самом деле необходимых настроек не так много.

Итак, по порядку.

Самое важное выключить панель инструментов Tools и вызывать все инструменты при помощи горячих клавишь. Выучить их довольно легко, у меня на это ушло не больше недели. Поначалу было не привычно, постоянно хотелось включить панель :)

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

На мой взгляд самые необходимые панели которые должны быть включены при рисовании макетов сайтов это Layers, Character, Color ещё иногда пользуюсь панелью Layer Comps для рисования разных страниц сайта в одном psd файле.

В опциях панели Layers выключите отображение эскизов слоёв. При рисовании макетов получается очень много слоёв, без эскизов они будут выстроены более компактно и с ними будет удобнее работать.
Ну и последнее, что как мне кажется важно сделать при настройке Photoshop — это увеличить количество шагов истории хотябы до 30 — 35 (по умолчанию стоит 20 шагов).

Ну а теперь сохраняем рабочее пространство и тратим сэкономленное время на более приятные вещи :)