Я люблю иконки!

блог Кондратьевой Анны

Разработка сайта — htmlman

Slice Tool и ещё немного о PhotoShop

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

Поэтому я и решила поделиться парой инструментов ФШ (если конкретнее — Slice Tool и волшебное «Windows-Arrange-New window for…»), очень облегающих и ускоряющих мою работу — вдруг для кого-то это будет полезным:)

Итак, кликаем по картиночке для привлечения внимания и ныряем под кат:)


Для начала я хочу рассказать о Slice Tool.
Я очень долго не могла понять, зачем нужен этот инструмент, а узнав, по достоинству оценила его полезность. Слайс тул позволяет «раскроить» документ на составляющие и сохранить их одним махом в отдельные файлы. Думаю, прежде всего этот инструмент создавался для веб-дизайнеров, создающих свои макеты в ФШ и там же нарезающих их под вёрстку — теперь можно было забыть о потерянных при кропе пикселях, о сотнях малюсеньких ПСДшниках, не раз создавшихся для каждой кнопки отдельно и о времени, уходившем на сохранение и переименование каждого куска документа.
(Слайс-тул, повторюсь, сохраняет все элементы за один приём — когда он активен и вы выбираете пункт «Save for Web…», то после сохранения вы в указанной папке найдёте не картинку с этим документом, а подпапку Images, где он уже будет храниться, нарезанный на мелкие картинки. )

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

Располагается он там же, где и кроп.

Разобраться с ним оказалось несложно — нужно просто выделить этим инструментом ту часть документа, которую потом хотите сохранить как отдельную картинку:

Как видите, тут у меня уже выделены две иконки и сейчас я обвожу третью.

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

Как подсказывает deviantria в комментах, способ не сохранять лишние слайсы таки есть. Цитирую:

Переходим к окну «Save for Web & Devices», в центре которого видим миниатюру нашей работы с размеченными Slice Tool’ом зонами. Здесь, зажав Shift, левым кликом мыши отмечаем только те зоны, которые мы хотим сохранить отдельными файлами. Нажимаем «Save» и видим следующее окно, в котором нам предлагается выбрать место для сохранения. В этом окне в выпадающем меню «Slices» выбираем строку «Selected Slices». В принципе, в данном случае эта строка ставится автоматически, но если нет, то выбираем ее вручную. Всё, жмём «Сохранить» и получаем в папке Images нарезку только из того, что мы выбрали. Никакого лишнего мусора. :)

А также — как сменить название папки images.

В окне выбора места сохранения папки со слайсами (Save Optimazed As) открываем выпадающее меню «Settings:» и выбираем в нём пункт «Other…». После выбора этого пункта появляется дополнительное окно «Output Settings», в котором помимо множества прочих настроек имеется пункт «Put Images in Folder:». В этой строке вводим название, которое в дальнейшем будет присвоено папке с нашими слайсами. Подтверждаем нажатием кнопки «Ок».

И ещё один несомненный плюс слайсов — возможность задавать своё название каждому куску документа. При клике правой кнопкой на синем квадратике в углу клетки появляется контекстное меню, где среди прочих полезностей есть пункт «Edit Slice Options…» При клике на него появляется следующее окошко:


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

Дополнительное окно для документа.
Раньше при рисовании иконки самым часто используемым инструментом у меня был Zoom. На таких маленьких размерах рисовать приходится только в очень большом увеличении, постоянно проверяя, какой эффект дало каждое твоё действие. Ведь тут работа довольно тонкая, и подвинутый на полпикселя узел шейпа может как улучшить иконку, так и испохабить её (какие страсти).
Это продолжалось долго и муторно, пока онин милый юноша с мэйкпиздато не поделился со мной одной, как выяснилось, очевидной вещью.
Windows-Arrange-New window for… — запомните этот путь, так можно открыть дополнительное окно для документа, над которым вы работаете.

Я даже проиллюстрирую этот путь для верности.

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

Вот так это приблизительно выглядит на деле (кликабельно).

Эти два несложных приёма, наравне с пиксельной сеткой (о ней я уже писала) очень экономят моё время и нервы, надеюсь, понравятся они и вам.
Удачи и не забывайте почаще сохраняться!

18 комментариев

  1. Gusev:

    Молодец, познавательно. Ань опечатка вышла "созравался"

    Ответить
  2. Шама:

    О спасибо! Уже поправила)

    Ответить
  3. Fireform:

    О вот этого не знал, спасибо! Хотя чаще пользую иллюстратор. Нужно сей способ там попробовать:)

    Ответить
  4. Шама:

    Да, там эта фишка тоже классно реализована, но правда, я совершенно не в курсах где и как её включать:)

    Ответить
  5. deviantria:

    По поводу лишнего мусора в виде белого пространства вокруг размеченных зон…
    Переходим к окну "Save for Web & Devices", в центре которого видим миниатюру нашей работы с размеченными Slice Tool'ом зонами. Здесь, зажав Shift, левым кликом мыши отмечаем только те зоны, которые мы хотим сохранить отдельными файлами. Нажимаем "Save" и видим следующее окно, в котором нам предлагается выбрать место для сохранения. В этом окне в выпадающем меню "Slices" выбираем строку "Selected Slices". В принципе, в данном случае эта строка ставится автоматически, но если нет, то выбираем ее вручную. Всё, жмём "Сохранить" и получаем в папке Images нарезку только из того, что мы выбрали. Никакого лишнего мусора. :)

    Ответить
  6. Шама:

    Ееееееее, всё получилось!
    deviantria, спасибо огромное!)
    Если Вы не против, я добавлю Вашу подсказу в сам пост.

    Ответить
  7. deviantria:

    Сочту за честь :)
    Если Вы не против, можно на "Т" 😉

    Ответить
  8. Шама:

    Океееей!:D
    Спасибо тебе ещё раз, сейчас пойду добавлять коммент в текст.

    Ответить
  9. deviantria:

    Нашёл-таки как сменить название папки images.
    В окне выбора места сохранения папки со слайсами (Save Optimazed As) открываем выпадающее меню "Settings:" и выбираем в нём пункт "Other…". После выбора этого пункта появляется дополнительное окно "Output Settings", в котором помимо множества прочих настроек имеется пункт "Put Images in Folder:". В этой строке вводим название, которое в дальнейшем будет присвоено папке с нашими слайсами. Подтверждаем нажатием кнопки "Ок". =)

    Ответить
  10. Шама:

    Супер, и это получилось!
    Спасибо огромнейшее, пойду опять править текст поста:))

    Ответить
  11. HuMMi:

    Очень полезная статейка!) Спасибо!))

    Ответить
  12. Anonymous:

    У меня Photoshop Elements 7.0, а там только есть функция "кадрировать" (то есть нет выбора). Что мне сделать, чтоб получить такой же результат? Подскажите пожалуйста:)

    Ответить
  13. Шама:

    Уфф, если честно, то даже в глаза не видела эту версию программы, так что к сожалению, не смогу подсказать Вам выход:(
    а на Photoshop CS5 перейти не хотите?)

    Ответить
  14. Anonymous:

    Вполне можно, все равно спасибо за совет:)

    Ответить
  15. Александр:

    Что то у меня с SHIFTом не прокатило откл. не нужных на запись элементы. За то заметил другой, можно даже не заходя в save for web… просто кликаешь на ненужном элементе правой кнопкой ((если надо несколько сразу, то через шифт инструментом Slice Select Tool)) и выбираешь Edit Slice Options. Выходит окошко и вверху выбираешь в Slice Type режим No Image. Соответственно при записи этот элемет не будет сохраняться, и плюс в том что он так запоминается и не надо жать шифт и отбирать элементы каждый раз при новой записи… тем более у меня почему то шифтом не прокатило все равно 😀

    ПС: SHIFT рабочий)) Photoshop CS5
    ПСС:) И если пользуешься Slice Tool и не хочешь лазить переключать на Slice Select Tool, то надо просто зажать Ctrl и держать пока пользуешься… Через него можно просто двойной клик левой, не жмя на правую кнопку и не ищя там опцию нужную %)

    Ответить
  16. Болтян Евгений:

    Да, это здорово. никто не может сказать что знает фотошоп) Его можно только познавать))

    Ответить
    • Шама:

      Это точно!)) Познавать, как неведомые дали 😀

      Ответить
  17. Zita:

    Спасибо за дельный совет! Столько лет работаю в фотошопеб а такой мелочи не знала про Windows-Arrange-New window for…

    Ответить

Добавить комментарий