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

Единицы измерения

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

• В диалоговом окне создания документа, для полей Width и Height.

• В меню Edit (Windows) или Photoshop (MacOS) -> Preferences
  • -> Units & Rullers, для полей Rulers и Type

    

  • -> Guides, Grid, Slices & Count, для поля Gridline every

    

• А также проверить, чтобы все отношения были указаны с использованием пикселов и дюймов (Например: pixels/inch, вместо pixels/cm), поскольку стандартное разрешение для экрана равно 72 пиксела на дюйм. Соответственно логичнее использовать отношение к дюймам а не сантиметрам (хотя, это ни на что не влияет).

  

Расположение панелей

Я пользуюсь широкоформатным монитором с разрешением 1680×1050, чего и вам советую (т. е. не ниже). При таком разрешении удобно размещать панели слева и справа, а не только справа.

Слева я располагаю панели:

• Character + Paragraph
• Swatches + Styles
• History + Actions

Справа:

• Info + Histogram
• Layers + Channels + Paths

Эти панели нужны для работы с дизайном сайтов чаще всего. Панели, идущие в списке первыми, должны быть видны по-умолчанию. Остальные панели можно располагать справа свёрнутыми (Collaps to icons), как это умеет делать Photoshop версии CS3.

Панель инструментов

Некоторые инструменты уместно вывести на первый план, если они спрятаны в выпадающем меню.

• Polygonal Lasso Tool гораздо удобнее для выделения, чем обычное.
• Magic Wand Tool как-то привычней, чем новый инструмент Quick Selection Tool.
• Paint Bucket Tool выводим на первый план. Градиенты я настаиваю в стилях.
• Я часто использую Rounded Rectangle Tool для изображения блоков с закруглёнными углами, поэтому для меня он более приоритетный.
• Для изменения размера блоков с закруглёнными углами без потери симметрии закруглённых углов, нужно пользоваться инструментом Direct Selection Tool . С его помощью я выделяю точки угла и перетаскиваю с зажатой клавишей Shift.

Рабочая область

Самый удобный режим работы с холстом — Full Screen Mode With Menu Bar. Настраивается самой нижней кнопкой в панели инструментов или в меню View -> Screen Mode.

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

Другое

View -> Show -> Smart Guides — включаем «умные» направляющие. При позиционировании любого элемента направляющие будут «подсвечивать» выравнивание относительно других элементов.

Если вы часто имеете дело с англоязычным контентом, то в панели Paragraph уберите галочку Hyphenate, чтобы английские слова автоматически не переносились в конце строки, ведь браузеры этого делать не умеют.

Не забывайте проверять как текст будет выглядеть с отключенным anti-aliasing-ом, ибо IE6, Firefox и Opera (все в WinXP), используют системные настройки сглаживания шрифтов, которые по-умолчанию сглаживают шрифт только начиная с размера, примерно, 18 пикселов.

Для сохранения картинок я использую диалоговое окно File -> Save for Web&Devices… Для JPEG картинок мне мало 60% качества. Поэтому я создаю собственную настройку JPEG-80 и называю его «JPEG Best». Кроме того, я создаю дополнительные настройки для PNG-8 и GIF с различным количеством цветов (8, 16, 32, 64, 128 и 256) и разным Dithering-ом (я бы назвал это диффузией, по смыслу больше подходит) и без него.

Ну и естественно, цветовая модель должна быть RGB. Это уже догма.

P. S. Не забудьте сохранить рабочую область выбрав меню Window -> Workspace -> Save Workspace…

Дополнено по просьбе читателей и собственному пожеланию

В Preferences -> Perfomance можно увеличить количество шагов истории, но это будет сильно нагружать scratch-диск, поэтому рекомендую чаще пользоваться snapshot-ами, а лучше сохранять разные версии в разные файлы. Там же можно увеличить размер scratch-диска и уровень кеша, чтобы улучшить скорость работы Photoshop-а.

В Preferences -> Cursors рекомендую Other Cursors установить в положение Precise. Тогда курсоры вспомогательных инструментов будут иметь вид прицела, и будет удобнее что либо помечать, выделять, закрашивать или позиционировать.

Нажмите cmd + R (Ctrl + R), чтобы показать линейку (Rulers). Нажмите на линейку слева или сверху и не отпуская клавишу мыши ведите на рабочую область. В итоге появится направляющая (Guide) с помощью которой удобнее позиционировать элементы.

При перетаскивании направляющей зажмите Shift, чтобы линия «скакала» по делениям линейки. Двигайте направляющие только при выбранном инструменте Move Tool , а то будете удивляться почему направляющие не перетаскиваются.

Цветовые профили

Чтобы избежать проблем с сохранением изображений, с самого начала нужно настроить монитор. Лучше всего это делать с помощью профессиональных оптических устройств для калибровки монитора, так называемые «колориметры» (например: PANTONE Huey или более крутой i1Display 2). Но если такой возможности нет, то надо воспользоваться программными средствами. В MacOS X вполне подходит встроенная утилита калибровки монитора, а для Windows рекомендую программу Adobe Gamma.

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

После того, как монитор настроен, в Photoshop-е необходимо зайти в меню Edit -> Color Settings и установить в качестве рабочего RGB профиля sRGB. Как правило он выбран по умолчанию.

Все новые файлы будут сохраняться в sRGB, но если вы редактируете старые работы с другим профилем или редактируете чужую фотографию например в Adobe RGB 1998, то нужно конвертировать в sRGB с помощью меню Edit -> Convert to Profile… (предварительно убрав галочку с Flatten Image, чтобы слои не слились в один).

Если вы сохраняете файлы для веба, используйте Save For Web & Devices. Кстати из всех браузеров только Safari умеет читать профиль картинки и показывает её в соответствии с её профилем. Но лучше профили вообще в изображения не внедрять.

• Проходит по восьми слоям и изменяет им прозрачность,
• Экспортирует картинку в gif,
• Повторяет действие восемь раз с изменёнными значениями прозрачности для каждого раза. В этоге экспортируется восемь картинок.

Что нужно сделать вам?

• Скачайть action-файл и psd-файл.
• Action-файл киньте в папку [Adobe Photoshop folder]/Presets/Photoshop Actions
• В psd-файле восемь слоёв обозначеных номерами. Нарисуйте на каждом слое фрагмент иконки.
• Запустите Action.

Важно: перед запуском action’a убедитесь, что у вас на диске C: есть папка ajax_icon. Именно в эту папку будут экспортироваться готовые картинки. Если папки не будет или она будет неправильно названа, то экспорт работать не будет.

В итоге будет создано восемь файлов с названиями a1.gif, a2.gif … a8.gif. Из этих картинок вы можете сделать анимированный gif вашим любимым способом, будь то ImageReady, Photoshop CS3 или какая-нибудь другая программа.

Тем, кто не умеет создавать анимации в программах могу посоветовать online-генератор gif-анимаций — Gifninja.

Каждую такую иконку я создаю с помощью моего Action’a за пару минут.

Для чего может приготиться? Для разработки дизайна сайта в photoshop’e. Если на сайте используются какие-то контролы, то их обязательно нужно разметить в шаблоне. Каждый раз скриншотить неудобно. Тем более в разных браузерах они выглядят поразному, а большенству из них нельзя изменить внешний вид с помощью CSS.

Internet Explorer

Здесь только однострочное текстовое поле ввода только одно, по-скольку выключеное поле ничем не отличается, кроме цвета шрифта. Ну а цвет шрифта завсегда в CSS можно поменять. Так же нет select multiple disabled.

Mozilla Firefox

В принципе очень схожи по виду с IE, но есть ньюансы. Нет двустрочного textarea, потому что он отличается от многострочного только высостой поля и высотой ползунка прокрутки. Так же нет select multiple disabled.

Opera

Здесь полный набор.

Safari

А в Safari кроме всего прочего добавлены и фокусированые контролы. Просто продублировал слои с нормальными контролами и добавил специально оформленый Outer Glow. Можете посмотреть, почти как у Safari.

Получите все контролы в PSD-формате в zip-архиве.