Посты с тэгом «photoshop for developers»

  • ФДВР. Каналы и маски: практика — II

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

    Прежде чем приступать к оптимизации, необходимо разобраться, как сохраняются полупрозрачные PNG (PNG24 в терминологии фотошопа). В этом формате каждый пиксель описывается четырьмя байтами: RGBA (red, green, blue, alpha). Последний байт отвечает за прозрачность.

    Возьмем для примера два пикселя в формате RGBA: 123,49,54,0 и 65,130,60,0. Несмотря на то, что значения этих пикселей разные, для зрителя они выглядят абсолютно одинаково: они оба полностью прозрачные. Так как пиксели разные, PNG-упаковщик не сможет их нормально обработать фильтрами. А что будет, если мы оба этих пикселя заменим на 0,0,0,0 и 0,0,0,0? Зритель совершенно ничего не заметит, а вот для упаковщика разница будет огромной: эта последовательность гораздо эффективнее упаковывается фильтрами. Приведенный выше пример можно записать как 0(8), то есть значение 0 повторить 8 раз.

    Именно на этом и будет основан наш способ оптимизации — мы будем заменять детализированные полупрозрачные области на менее детализированные, которые будут лучше упаковываться. Для этого урока нам понадобится плагин Remove Transparency.

    Откроем исходное изображение в фотошопе:

    stage13

    Оригинал весит 199 КБ. Первое, что бросается в глаза, это тень часов и блики маятника. Продублируем текущий слой и выполним на нем фильтр Photo Wiz → Remove Transparency. Теперь мы видим, что же на самом деле сохранилось в изображении:

    stage22

    Посмотрим поближе на тень:

    stage32

    Отчетливо виден шум, но сама область — полупрозрачная (прозрачность менее 50%), и пользователь его совсем не заметит.

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

    Делаем Ctrl+клик или ⌘+клик по слою Layer 0 и создаем на основе выделения маску для слоя Layer 0 copy (если вы не знаете, как это сделать, перечитайте предыдущие уроки). Переходим в палитру Channels и делаем дубликат канала с маской. Теперь необходимо указать область воздействия фильтра Median. Сами часы трогать нельзя, а вот с тенью и бликами можно немного поиграться. Инвертируем маску (Ctrl+I или ⌘+I) и применяем к ней Levels (Ctrl+L или ⌘+L). Передвигаем светлый ползунок влево до значения 75 (подбирается на глаз). Таким образом мы получили маску, которой будет ограничиваться действие фильтра Median:

    stage42

    Выделяем текущий канал (Ctrl+клик или ⌘+клик), переходим в палитру Layers, кликаем на пиктограмме изображения в слое Layer 0 copy (именно на нее, а не на маску) и применяем фильтр Noise → Median. Значение радиуса выбираем на глаз, у меня получилось 3:

    stage51

    Как видите, шум совсем пропал. Попробуем сохранить изображение в формате PNG (не забудьте включить маску, если вы ее отключили).

    result1

    У меня получилось изображение весом 172 КБ (было 199 КБ) — вполне неплохо за такое короткое время. А умные мальчики и девочки должны сразу догадаться, что можно еще оптимизировать саму маску (например, с помощью Posterize или цветового режима Indexed) и сделать вес картинки еще меньше :) .

    Я показал простой способ оптимизации полупрозрачные области изображения. Но наибольший эффект достигается при комбинировании этого способа со способом из предыдущего урока. Алгоритм такой: сначала оптимизируете «сердцевину» — непрозрачные пиксели, — перегнав их в индексирванную палитру, затем добавляете полупрозрачные пиксели, снизив им детализацию. Тогда у вас получится такой же результат, как в этом примере: со 199 КБ сможете ужать картинку до 88 КБ без видимых ухудшений.

    ***

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

  • ФДВР. Каналы и маски: практика — I

    В этой статье мы научимся на практике применять каналы и маски для оптимизации изображений в формате PNG.

    Первое, на что хочется обратить внимание, так это на игнорируемые многими разработчиками маски влияния на цветовое распределение и на смешивание в окне Save for Web:

    masks

    Давайте посмотрим, как это может помочь нам в оптимизации PNG-изображения. Возьмем исходник:

    clock

    Попробуем сохранить его в PNG8 со следующими настройками: Color reduction: Adaptive, Dither: No dithering, Colors: 256. Не будем рассуждать, насколько целесообразно сохранять такое изображение в PNG (мы ведь тренируемся), лучше посмотрим на то, что получилось:


    42 КБ

    Первое, что мне бросается в глаза — «побитый» маятник. На общем фоне это очень яркое пятно, которое притягивает взгляд зрителя, и это же пятно выглядит очень некрасиво. Попробуем сгладить цветовые переходы маятника, выставив в параметрах сохранения Dither: 100%.

    step2
    46 КБ

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

    step2_noise

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

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

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

    step3

    Переходим в диалоговое окно Save for Web и выставляем там следующие параметры: Color reduction: Adaptive, Dither: No, Colors: 128 (как видите, количество цветов делаем в 2 раза меньше). Теперь надо выбрать маску влияния на цвет: жмем на иконку рядом с Color reduction и в списке выбираем канал color. Смотрим:

    Сейчас вы увидели маску влияния в действии: маятник выглядит прекрасно, чего не скажешь о всем остальном. По сути, мы сказали фотошопу: «Область маятника очень важна, поэтому постарайся сделать так, чтобы там сохранилось как можно больше цветов». Маска влияния работает точно так же, как и обычная маска: белый цвет означает максимальный приоритет области пикселей в основном изображении, черный — минимальный. Все промежуточные оттенки пропорционально влияют на приоритет области.

    Маятник перетащил одеяло на себя, поэтому нужно снизить интенсивность цвета белого кружка, чтобы остальные области не были обделены цветом. Закрываем окно Save for Web, выделяем канал color и применяем к нему Levels (Ctrl+L или ⌘+L). Ставим нижнему белому ползунку в Output levels значение 50. Таким образом мы снизили интенсивность цвета в маске, сказав, что самый яркий цвет должен быть не больше 50:

    step5

    Пробуем еще раз сохранить с теми же параметрами:

    step6

    Уже лучше, но появились другие проблемные области, которые тоже нужно исправить:

    step7

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

    step8

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

    У меня получилась вот такая маска:

    step9

    Соединив все вместе получим такое изображение (параметры сохранения: Adaptive, 128 цветов):

    step10

    Вполне неплохо для 128 цветов, не находите? Сделаем последние штрихи: увеличим количество цветов до 180, а верхнюю границу смешивания снизим до 80%. В итоге наш модельный ряд выглядит следующим образом:


    256 цветов, без смешивания, без оптимизации
    42 КБ
    result
    180 цветов
    34 КБ
    step10
    128 цветов
    31 КБ

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

  • Фотошоп для веб-разработчика. Каналы и маски: теория

    В скринкасте к статье «Про PNG, часть 4» я продемонстрировал, так сказать, пять минут своей работы по оптимизации изображения, вогнав в ступор даже видавших виды студийных арт-директоров :) Тогда я написал, что не планирую объяснять, что и зачем я там делал. Сейчас я собираюсь исправиться и подробно описать все показанные способы оптимизации графики.

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

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

    about-masks

    Маски бывают двух типов — векторные и растровые. Первый тип нас пока не интересует, рассматрим второй тип. Растровая маска представляет из себя черно-белое изображение. Черный цвет означает, что соответствующий пиксель изображения будет абсолютно прозрачным, белый — абсолютно непрозрачным. Все промежуточные цвета соответствуют разным степеням прозрачности. Таким образом, всего у изображения может быть 256 градаций прозрачности, а не 100, как привыкли думать веб-разработчики.

    Хозяйке на заметку

    Утверждение про 256 градаций справедливо для изображений с 8 битами на канал (28 = 256), для изображения с 16 битами на канал будет 65 536 градаций.

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

    Каналы — это тоже черно-белые изображения, но отвечают они за интенсивность цветового компонента в текущей цветовой модели. Например, в цветовой модели RGB есть три канала: красный, зеленый и синий. Соответственно, пиксели в этих каналах отвечают за интенсивность того или иного цвета. Посмотреть на них можно в палитре Channels.

    about-channels

    Казалось бы, что общего между каналами и масками, помимо того, что они черно-белые? Ну, во-первых, они все отображаются в палитре Channels:) Второе, и самое важное, Ctrl+клик или ⌘-клик по слою с каналом/маской создаст выделение. И наоборот — из выделения можно создать канал с маской и подкорректировать её с помощью инструментов рисования.

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

    Предположим, дизайнер нам прислал вот такую картинку одним слоем, после чего пропал из поля зрения.

    Логотип отеля «Феликс Завойский»

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

    Переходим в палитру Channels и смотрим внимательно на каналы.

    demo2

    Обратите внимание на зеленый канал (просто кликните на него): мы видим практически ровную черно-белую маску.

    demo3

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

    Выделяем все изображение (Ctrl+A или ⌘+A), копируем, создаем новый документ и вставляем туда нашу картинку. Помним, что черный цвет — абсолютно прозрачные пиксели, белый — не прозрачные. Но для начала нам нужно убедиться, что на фоне сплошной черный цвет, без каких-либо незаметных глазу переходов. Для этого в палитре Layers жмем на иконку Create new fill or adjustment layer и выбираем Threshold. Дизайнеры почему-то незаслуженно обходят стороной этот настроечный слой, хотя лично для меня это архиважный инструмент для анализа изображения. Смысл его довольно прост: с помощью ползунка мы устанавливаем пороговое значение яркости изображения (threshold по-английски «пороговое значение»). Все, что выше (правее) этого значения будет отображаться абсолютно белым, что ниже (левее) — абсолютно черным. Передвигаем ползунок в крайнее левое положение и начинаем потихонечку двигать его вправо (а вы знаете, что в фотошопе в полях ввода цифр можно увеличивать и уменьшать значения с помощью стрелок вверх и вниз на клавиатуре?). Так и есть — до третьего уровня мы видим, что фон меняется:

    demo4

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

    Сам слой Threshold нам больше не нужен — удаляем его. Теперь необходимо сделать так, чтобы серые пиксели логотипа стали белыми, а фон — абсолютно черным. Для этого очень хорошо подходит инструмент Levels. Вызываем его через Image → Adjustments → Levels.

    demo5

    Этот инструмент чем-то похож на Threshold с той разницей, что сохраняет полутона. У него уже три ползунка: тени (shadows), средние тона (midtones) и светлые тона (highlights). Относительно черно-белого изображения: все пиксели, яркость которых ниже (левее) точки теней, будут черными, выше (правее) светлых тонов станут белыми. Точка средних тонов управляет, как распределить яркость между белым и черным цветом (больше темных или светлых пикселей). Нам необходимо сделать так, чтобы серые пиксели логотипа стали точкой ярких тонов, а черный фон, располагающийся ближе к низу изображения (помните, что показал нам Threshold?) — точной теней. Выбираем черную пипетку dark и тыкаем в черный фон ближе к низу изображения, затем выбираем светлую пипетку light и тыкаем в серый цвет логотипа. В итоге гистограмма уровней должна выглядеть вот так:

    demo6

    Наша маска готова. Переводим изображение в модель RGB (Image → Mode → RGB Color) и в палитре Channels делаем Ctrl+клик или ⌘-клик на любом канале. В палитре Layers создаем новый слой и заливаем выделение цветом логотипа:

    demo7

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

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

    Что следует запомнить из этого урока:

    • Каналы и маски — инструмент не только для дизайнеров. Экспериментируйте с разными цветовыми моделями (CMYK, Lab) для достижения нужного результата в сложных случаях.
    • Обязательно освойтесь с Levels и Threshold. Вы должны четко понимать, как они работают, когда и ради чего их нужно вызывать. Поэкспериментируйте с Curves.

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

  • Фотошоп для веб-разработчика. Кнопочки

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

    button-example

    Дизайнер хочет, чтобы на сайте было 10 разных цветов таких кнопок, причем при наведении курсора цвет должен немного бледнеть. Вариант «в лоб» — нарезать кучу картинок под каждый цвет — нам, как правильным разработчикам, не подходит, поэтому мы создадим специальную маску, под которую будем класть разные градиенты. В итоге можно будет обойтись всего двумя небольшими картинками. А если постараться — то и одной.

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

    ss11

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

    Давайте рассмотрим подробнее слой shape. Это специальный векторный слой, состоящий из двух частей: цвет и маска.

    ss3

    Дважды кликнув на первый квадратик мы можем поменять цвет шэйпа, кликнув на второй — отредактировать его внешний вид.

    Кликаем на маску и выбираем Direct Selection Tool:

    ss2

    Выделяем все верхние узлы:

    ss4

    Теперь с помощью стрелок вверх/вниз на клавиатуре перемещаем узлы в нужное положение, чтобы верхняя граница стала четкой. Помните, что шаг смещения зависит от текущего масштаба. Я рекомендую увеличить масштаб до 500%. Вы можете временно включать/отключать отображение векторной рамки с помощью Ctrl+H/⌘+H, это поможет вам точнее разместить узлы.

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

    ss5

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

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

    Делаем правый клик на иконке fx у дубликата и в меню выбираем Create Layers. Мы превратили все эффекты в полноценные слои, с которыми можно работать. 

    Сразу же обращаем внимание на то, что обводка стала чуть темнее:

    ss7

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

    Исправим эту проблему. Выделяем слой с обводкой (у меня он называется shape copy’s Inner Stroke) и обесцвечиваем его: Image → Adjustments → Desaturate. Обводка стала черно-белой — как раз то, что нам нужно — но все равно слишком темной. Снизим прозрачность у обводки: выставим параметр Opacity в 60%. Теперь дубликат практически не отличить от оригинала (учитывайте, что на скриншоте масштаб 400%):

    ss8

    Тень (shape copy’s Drop Shadow) тоже имеет зеленоватый оттенок, обесцветим и ее с помощью команды Desaturate.

    Осталось вырезать внутренности кнопки, чтобы тень была поверх белого фона, а обводка — поверх прозрачного. Сейчас все слои эффектов, кроме Drop Shadow, находятся в режиме маски отсечения (clipping mask): слои накладываются поверх пикселей основного слоя. Нам нужно перевести их в нормальный режим, для этого делаем Alt-click на линии между слоями shape copy и shape copy’s Gradient Fill. Получим вот такой результат:

    ss9

    Отключаем слои с Color Fill и Gradient Fill — они нам больше не нужны. Теперь нам нужно наложить на оставшиеся слои маски. Делаем Ctrl-click/⌘-click по маске слоя shape copy, выделяем слой Layer 1 и нажимаем на иконку mask-icon в палитре слоев. Проделываем такую же операцию для слоев shape copy’s Inner Stroke и shape copy’s Drop Shadow. Получим вот такой результат:

    ss10

    Конечно же, это не то, что мы хотели получить: прозрачной должна быть внутренняя часть кнопки, а не внешняя. Чтобы исправить это, нужно инвертировать маску в слоях shape copy’s Drop Shadow и Layer 1. Выделяем маску каждого слоя и выполняем Ctrl+I/⌘+I, отключаем слой shape copy. Получилось то, что нам нужно:

    ss111

    Теперь необходимо обрезать ненужные белые пиксели. Не торопитесь выбирать инструмент Crop и прицельно выделять блок — есть более простой и красивый способ. Выбираем Image → Trim, в окне выбираем Based On: Top Left Pixel Color .

    Осталось подготовить картинку для использования на странице. Для создания кнопки хорошо подойдет способ «звездочка», нужно только правильно спозиционировать уголки. Объединяем все слои (Layer → Merge Visible) и вызываем Filter → Other → Offset. В диалоговом окне указываем смещение по горизонтали и вертикали в 9 пикселей, в качестве значения Undefined Areas выбираем Wrap Around:

    ss12

    Так как правильные мальчики и девочки верстают сайты с учетом изменения размера шрифта, нужно добавить нашей картинке запас прочности. Для этого увеличиваем размер холста до 300×80 пикселей и растягиваем последний горизонтальный и вертикальный пиксели (тут очень удобно воспользоваться инструментами Single Row Marquee Tool и Single Column Marquee Tool).

    Все, работу над изображением мы закончили. Сохраняем картинку в формате PNG-24 под названием, например, button-mask.png.

    Теперь переходим к разметке. Тут все довольно просто: создаем контейнер, в котором размещается 4 уголка. Для того, чтобы надпись была по середине кнопки, мы не будем использовать CSS-свойство height, вместо него воспользуемся свойством line-height.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title>Styled button example</title>
    		<style type="text/css">
    			.styled-button {
    				text-align:center;
    				position:relative;
    				width:6em;
    
    				/* Вместо высоты */
    				line-height:2.3em;
    				color:#428135;
    				background:url(green-gradient.png) #8fbd81 repeat-x;
    				overflow:hidden;
    			}
    
    			.styled-button .cn {
    				display:block;
    				background:url(button-mask.png) repeat-x;
    				width:100%;
    				height:80px;
    				position:absolute;
    
    				/* Радиус скругления */
    				left:-9px;
    				top:-9px;
    			}
    
    			.styled-button .cn.tr,
    			.styled-button .cn.br {
    				/* Эмуляция свойства right для IE6 */
    				margin-left:100%;
    			}
    
    			.styled-button .cn.bl,
    			.styled-button .cn.br {
    				/* Такое же значение, как у line-height */
    				margin-top:2.3em;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="styled-button">
    			Кнопка
    			<span class="cn tl"></span>
    			<span class="cn tr"></span>
    			<span class="cn bl"></span>
    			<span class="cn br"></span>
    		</div>
    	</body>
    </html>
    

    Осталось только для IE6 прописать фильтр, чтобы отображался полупрозрачный PNG.

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

    На что нужно обратить внимание в этом уроке:

    • Базовое сведения о работе векторных и растровых масок.
    • Некоторые не очевидные способы решения стандартных задач, типа Image → Trim или Single Row Marquee Tool.
    • Работа с эффектами слоев.
    • Фильтры нужны не только дизайнерам.

    Если сама идея описания фотошопа для веб-разработчиков нравится — буду писать дальше.

  • Фотошоп для веб-разработчика. Вступление

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

    Считается, что фотошоп слишком «тяжел» для повседневных копи-пэйст нужд веб-разработчика, поэтому им предлагают всякого рода альтернативы: Adobe Fireworks, Paint.NET, Pixelmator и так далее. А также жуткий пиздец под названием Gimp (я считаю, что суровые линуксоиды должны править картинки в командной строке). Я сам давно пытался найти альтернативу фотошопу, но все поиски оказались безуспешны: как ни странно, мне не хватало функциональности.

    Я очень люблю графику, а еще больше люблю ее оптимизировать. Я сейчас не говорю о той «оптимизации», где нужно просто подергать слайдеры или запустить программку, я говорю о настоящей оптимизации, когда необходимо реконструировать  изображение, чтобы оно меньше весило и выглядело лучше. Я слишком ленив, чтобы создавать сотню похожих картинок разного цвета, я лучше сделаю одну сложную маску и буду менять цвет через CSS. Для достижения этих целей я пользуюсь теми же инструментами, что и дизайнеры. Разница в том, что дизайнер оперирует эмоциями, а я — цифрами. Дизайнер делает так, чтобы картинка нравилась пользователю, а я делаю так, чтобы она лучше сжималась и с ней было удобнее работать в CSS. Дизайнер не знает, как лучше нарисовать тень, чтобы она как можно меньше весила в PNG, а я не знаю, как эту тень сделать похожей на настоящую. Мы дополняем друг друга, при этом каждый делает свою работу и не вмешивается в чужую. 

    Можно, конечно, полчаса стоять над душой у дизайнера и объяснять ему на пальцах, что нужно сделать с картинкой, но я лучше потрачу 5 минут и сделаю все сам. Если вы разделяете мою точку зрения, значит, мое время будет потрачено не зря.