Smart Object в Photoshop – поможет и верстальщикам, и дизайнерам

  1. Как уменьшить количество слоев для визуально одного объекта (кнопочки, например), сохранив возможность его редактирования?
  2. Как уменьшить количество слоев, объединив в один слой header, footer на макетах внутренних страниц, при этом снова-таки оставив возможность их изменения?
  3. Как облегчить верстальщику вырезание линий из одно- двух пиксельных линий, составляющих единую линию, теней, а так же кнопочек, иконок?
  4. Как быстро вносить изменения на все однотипные элементы на странице?
  5. Как уменьшать растровую картинку без потери качества и сохраняя правильные пропорции эффектов (тень в 5px для объекта 200*200px – смотрится совсем по-другому, нежели для этого же объекта при его размере 100*100px)


Я работаю дизайнером, и вот уже несколько последних проектов использую Smart Object. Эта функция присутствует в Photoshop давно, но идея использовать ее в веб-дизайне, лично мне, пришла недавно. Возможно, это попытка придумать велосипед, но думаю, этим стоит поделиться.

Smart Object – это слой, содержащий изображения из растровых или векторных слоев Photoshop, сохраняющий все стили и эффекты в редактируемом состоянии, или слои Illustrator. Слои Smart Object обозначаются специальным значком (рис. 1).


Рис.1

При двойном щелчке левой кнопкой мышки на этом значке открывается новый файл (с разрешением .psb), со всеми вложенными в этот Smart Object слоями. С ними можно работать так же, как и с обычными слоями. Размер этого файла зависит от слоев, находящихся в нем (рис.2).


Рис.2

Если к слою не применены тени или внешнее свечение – размеры Smart Object строго соответствуют размерам включенных в него слоев, если применены – то появляется отступ со всех сторон, это позволяет не обрезать случайно тень, которую не видно на плохом мониторе (рис.2). Эта функция облегчает вырезание вот таких теней (рис.3).
Дизайнер вздохнет с облегчением – верстальщик не обрежет половину тени, которую на его мониторе не видно, а верстальщику не нужно отключать фон и искать границы этой тени. С этого файла ее можно сразу сохранить как отдельную картинку в .png.


Рис.3

Здесь правда есть несколько подводных камней. Нужно учесть, если на макете масштабировать размер слоя со Smart Object – во внутреннем файле(.psb) все слои будут в 100% масштабе. У Smart Object отображается особая рамка при масштабировании (рис.4).


Рис.4

И второе, если вы включите в состав Smart Object корректирующий слой (Adjustment Layer) – размер Smart Object будет таким, как размер всего вашего макета страницы, а не нужной иконки, например.

Еще одна радость, при копировании Smart Object вы получаете несколько слоев, которые являются точной копией друг друга, и при внесении изменений в один из них – меняются все. Что это нам дает? У вас есть макет страницы каталога с 9 кнопками «Купить», заказчик посмотрел и захотел добавить на эти кнопочки иконку корзины. Это не требует значительных трудозатрат, мы заходим в один из слоев Smart Object, вносим необходимые изменения, сохраняем – и о счастье! – у нас все кнопочки имеют новый вид.

И снова полезность – включив большую растровую картинку в Smart Object, вы можете свободно ее масштабировать, не теряя качество изображения. Пример масштабирования с использование Smart Object и без – рис.5 ( здесь четче видно детали)
И в любой момент вы сможете растрировать свою картинку, если изменение масштаба уже не планируется, а смысла передавать, дальше в работу большой по весу файл – нету.


Рис.5

Как же создать этот полезный Smart Object? Все так же легко, как и легко, с ним работать. Выбираем необходимые слои. И на панели слоев нажимаем правой кнопкой на одном из выделенных слоев – выбираем Convert to Smart Object (рис.6) или можно прописать свое сочетание клавиш.


Рис.6

Выбирать нужные слои легко с помощью инструмента Move Tool при включенной функции авто выбора слоев (рис.7). То есть выбирается тот слой, на который нажали левой кнопкой мышки, но это кому как удобно — включать ее или нет.


Рис.7

Использование Smart Object несколько увеличивает вес файла, но вам решать стоит ли оно того.
Для себя я сделала вывод – стоит!
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 36

    0
    Те кто уже «обрадовался» и будет использовать смарт-объекты… имейте ввиду, шейпы после преобразования и любой трансформации теряют привязку к пиксельной сетке…
      0
      С трансформацией — бывает, нужно следить, а вот с преобразованием в смарт-объект — как вы шейпу нарисовали, такой она и остается.
        0
        Нет, после преобразования в объект не теряет привязку. А при трансформации и так следить надо за этим.
        У smart object есть еще одно полезное свойство: если у вас есть много одинаковых элементов, стоит сделать один и свернуть его в объект и размножить. Если потом нужно в этом элементе что-нибудь поменять, это отразится на всех копиях этого объекта.
          0
          я же написал И… я не написал ИЛИ… спасибо, что бросились поправлять…
        +7
        Смарт -объектам года 4 уже. Не поздновато для статьи?
          +9
          Лучше поздно, чем никогда. К тому же многие не задумывались, что этим можно пользоваться.
            +1
            В прошлом году от достаточно талантливого дизайнера получал макеты с несколькими тысячами слоев и их копий. Любитель мелких деталек. Знаете, я понимал его в целом, т.к. не так что бы всецело свободно сам пользуюсь этим редактором.

            Смарт-объекты это как этап. Что бы понять, как это _действительно_ полезно использовать, это надо брать и использовать насильно. Фактической пользы не видно на первый взгляд. Это некоторое удобство.

            Удобно действительно становится тогда, когда у тебя подготовка макетов под верстку — тебе надо сделать около десятка картинок, которые типичные в шапках, навигации, подвалах.

            Все становится гораздо проще, когда ты понимаешь как в этом случае применить смарт-объекты.
          0
          По-моему не упомянули возможность экспортировать/импортировать содержимое смарт-объекта в файл, разницу между копией и экземпляром. И большой минус фотошопа в том, что он не следит за импортированными смарт-объектами из файла, иначе можно было бы создавать внешние библиотеки объектов модификация которых приводит к модификации всех импортированных экземпляров.
            0
            А я ненавижу smart object в макетах. Чтобы вырезать что-то нужно сделать кучу лишних действий — найти нужный smart object, дважды кликнуть, потом несколько раз нажать Ok. И так очень-очень много раз. Еще я люблю кликать по тексту «редактором», чтобы сразу открывалась папка с нужной группой слоев. Такой быстрый поиск получается) Smart object в большинстве случаев мешает. Он нужен только там, где картинка состоит из нескольких частей (логотип например).
              +1
              > кликать по тексту «редактором»
              Я нуб в фотошопе, но чувствую это немного подымет мою производительность. Подскажите, что за редактор и как правильно ним кликать?
                +1
                «Редактирование текста», буква Т в панели инструментов.
                  +1
                  А ели зажать «Alt», и кликнуть правой кнопкой по объекту то он выделится на палитре слоев, и с ним сразу можно работать, что удобно если слои не подписаны. Не за что, пользуйтесь на здоровье.
                +1
                Вот, кстати, в этом вы правы — сейчас представил насколько неудобно было бы работать с текстом находись он в смарт-объекте. Так, что да, переусердствовать не стоит и текст включать в смарт-объект тоже!
                  0
                  Смарты идеально подходять для резки — достаточно два раза кликнуть и получить в новом окне обрезанный элемент. Конечно, нужно класть в смарт заранее элементы для экспорта. Такие как иконки, кнопки и прочие элементы.
                    0
                    Это как так? А если там целый блок, а нужна только иконка? Два раза кликнуть, потом еще несколько раз Ок, потом выделяем нужный объект, потом со следующим блоком все заново.
                      0
                      А. хоспади… вас заманил в круг ада дизайнер, это отличная шутка на 1 апреля. Это конечно же бред) Я не вкладываю смартобъекты в смартобъекты в смартобъекты — это глупо, так как теряется гибкость.
                        0
                        Там не один smart object в другом, а просто целые блоки в них. Когда в smart object отдельные элементы, то это никаких проблем не вызывает, а когда половина макета в smart object — это кошмар.
                          0
                          Согласен. Поддержу в любых спорах.
                  +2
                  Смарт-объекты удобны главным образом там, где один и тот же элемент повторятся многократно. Очень удобно исправить один, и все остальные с ним синхронизируются.
                  Если они все уникальны — особой необходимости в них нет. Дело вкуса и договоренностей между участниками процесса.
                  Хотя некоторые плюсы есть, это бесспорно.

                  И, кстати, когда их очень много и каждый с эффектами — ФШ может тормозить.
                  Вот реальный случай из недавней практики: макет >20 мегапикселей (много экранов веб-интерфейса), много слоев и пара сотен смарт-объектов (кнопочки, галочки, слайдеры и пр.) — дико тормозило на i5@8GB. Добавили память до 16GB — забегало.
                    +1
                    Было бы еще полезней, если бы смарт-объект брал данные из одного файла. Т.е. если есть одинаковый объект в разных файлах, а надо его подправить. Меняешь файл-исходник и во всех файлах все само меняется автоматом
                      0
                      Это реализованно через сторонние плагины. Но все равно неудобно.
                      0
                      Главный плюс смарт-объектов — «дергать» растр во время разработки. Можно увеличивать (если предварительно это уменьшенное изображение большего размера), уменьшать растр. Лично мне не удобно работать внутри смарта, к тому же, визуально содержимое «отделяется» от остального окружения. Для простого скрытия лишних слоев, все же, папки групп подходят лучше. Элементы интерфейса все же двигать и масштабировать нужно слишком аккуратно, чтобы все это масштабировать смартами.
                        0
                        Это очень круто! Передал всем знакомым дизайнерам, чтобы брали на вооружение :)
                          0
                          Смарт-обьекты — для крупного растра, который впоследствии предполагается растягивать/сжимать. Или для групп обьектов, где используется нестандартное смешивание слоев (мультиплай, оверлэй).

                          Для кнопок, хедеров — страшная глупость. Количество слоев мы уменьшаем, а вот вес PSD возрастает существенно.
                          Если речь идет о крупном проекте, то в процессе подготовки финальных макетов из 30-50 макетов для верстки следует растрировать (да-да) все кнопки, повторяющиеся элементы (хэдер, футер).

                          А для верстальщика составить карту стилей в изменяемых слоях (векторные шейпы, смарт-обьекты в самом крайнем случае) вдобавок к функциональному описанию дизайна (все же его пишут?). Вот такую, как здесь — dribbble.com/shots/518727-Stylemap/attachments/36380
                            0
                            Карта стилей составляется и так, но до ее утверждения, макет может переделываться енное количество раз. И переделывать все кнопочки, когда в конце разработки последнего макета клиент вносит кардинальные изменения — явно не в радость.

                            Растрировать все кнопочки при передаче макета — ну это как верстальщику угодно, многие такого не оценят.

                            Но придумывать название для первой части двупиксельной линии, потом для второй — что бы верстальщик не путался в Shape43, Shape44 — меня не радует. А растрировать линии, что бы потом перерисовывать чуть темнее, а потом возвращать назад — тоже не хочется.
                              0
                              Хм, для этого и есть карта стилей. Финальные варианты всех кнопочек содержатся в ней, а сама карта — является руководством по окончательному варианту интерфейса проекта.

                              Различия легче прописать в описании (ну кроме запущенных случаев, когда в конце проекта что-то меняется кардинально, например, цветовая гамма), чем насиловать себя, верстальщика и интернет-канал гигантскими макетами со смарт-обьектами, и менять кнопочки / шапки в каждом.

                              Кнопки в макетах — растрятся, в карте стилей — не растрятся. Макет — это карта расположения элементов на конкретном экране, карта стилей — это, собственно, UI.

                              Линии и прочие элементы растрируются в самом конце, когда уже все утверждено. Для общей легкости макетов и порядка в слоях.
                                0
                                Различия легче прописать в описании

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

                                А если не хочет, то потом — а я думал, здесь будет иначе…
                                Или нужно показать заказчику, что делать так не нужно, потому что здесь, здесь и здесь — будет плохо смотреться.

                                До передачи макета в верстку — мне удобнее использовать смарт-обьекты. Растрировать их потом или нет? Пока пришлось только один раз, и то это были очень большие картинки, которых было много.
                                Растрировать кнопочки, линии — пока необходимости не было, не такие большие файлы.
                                У меня отдельные страницы в разных файлах (это для справки).
                                  0
                                  Ну, проблем с «сделает так как сам решил » еще не было, заказчик смотрит как будет с той и этой кнопочкой на этапе утверждения макетов, и страницы отдельные у меня тоже в разных файлах — глупо делать один большой PSD.

                                  Пока не сталкивался ни с какими проблемами.
                          • UFO just landed and posted this here
                              0
                              css есть в fireworks и сейчас, только объясните — почему он цвета делает только в RGB а не в hex!
                                0
                                Эх… css это хорошо, но лучше бы они текстовые стили допилили чтобы не вешали далеко не слабый комп на десятке объектов…
                                +1
                                Минус март объектов — хреновая интерполяция: мыло заметно большее при изменении масштаба к примеру векторных элементов, вложенных в смарт, чем если бы они лежали так.
                                  0
                                  Ещё полезное знать, что на векторные объекты можно применять фильтры (на самом деле Smart Filters) только если эти векторные объекты превратить в Smart Objects.
                                    0
                                    Еще один плюс смарт-объектов, это то что если применить crop к холсту, то обычное растровое изображение обрежется по размерам холста. Смарт-объект же будет сохранен полностью, даже та часть изображения что выходит за границы холста.
                                      0
                                      В свойствах кропа можно выбирать Delete или Hide.
                                      0
                                      Ну я бы не говорил прям, что их надо использовать везде, как раз с кнопками смарты работают плохо. Я уже давно выработал правила для себя где мне надо смарт, а где нет. А если использовать последний фотошоп, то там в них необходимость еще меньше.

                                      Only users with full accounts can post comments. Log in, please.