Почти шесть лет назад в интернете появился ресурс под названием Photoshop Etiquette и с тех пор его считают своеобразной реликвией. За последние годы много чего произошло в интернете и Etiquette отображает лучшее, что было, есть и, удивительно, но факт, будет.
В 2011 году только начинали закладываться основы адаптивного веб-дизайна. Традиционный стиль и работа с HTML еще не критиковались, но сейчас уже существует множество альтернатив. Тогда были и плиточные стили, на основе прототипов, визуальные, коллажи и иные. И все они подходили для представления на экранах мобильных устройств. Да, время, когда стили менялись от обычных и строгих к дизайнерским решениям, было захватывающим и памятным.
Но также в этот период и произошел своеобразный «взрыв» среди инструментариев, чья задача была сделать рабочий процесс дизайнеров наиболее эффективным. Появились Webflow и Ара, а некоторые мастера забросили Photoshop и нашли ему альтернативу, подходящую для веб-дизайна. Некоторые остались верны Photoshop, как средству прототипирования.
Но, несмотря на это, Photoshop Etiquette развивался и все большее количество новых веб-мастеров используют приложение и по сей день. Да, немалая заслуга в этом принадлежит самой Adobe. Но есть и другие причины.
Актуальность Photoshop Etiquette
Благодаря стандартам и правилам, представленным в Photoshop Etiquette, международные организации стали проводить более жёсткий отбор сотрудников, внимательнее относиться к тому, в каком виде выполняется заказ и прочее. Иными словами, стало очень важным то, в каком виде дизайн сайта представляется как заказ или как ведется совместная работа коллектива компании над проектом.
Удивительно, но, несмотря на большое количество альтернатив Photoshop, до сих пор в мире все нуждаются в принципах Photoshop Etiquette. Ибо передавать файлы, обмениваться и работать над ними – один из важных процессов.
Как вы уже поняли, мы не будет сегодня рассматривать красивые эффекты, плагины и расширения, примеры работ новаторов или победителей конкурсов. Мы поговорим о не менее важном для веб-дизайнера, о том, что способно сделать его работу корректной во многих смыслах.
Адаптивный дизайн состоит из множества частей - от изображений разных размеров и качества до кусочков CSS-кода и иных моментов. И если проект должен быть прибыльным, то до момента публикации всего этого, сам пакет частей должен быть эффективным.
Но плохая организация частей, спешка могут пагубно отразиться на работе в целом. В Photoshop разделение рабочих процессов, слои, экспортируемые материалы – легкая мишень для «срезания углов» и доминанты скорости. А ведь все, что мы делаем, должно быть сделано не просто хорошо, а идеально, безукоризненно. Делаем не для себя, для пользователей, для их комфорта и интереса.
В чем твоя роль, Photoshop Etiquette
К созданию Photoshop Etiquette приложили свою руку мастера из студии дизайна Сиракьюс штата Нью – Йорк. Для новичков в веб-дизайне Photoshop Etiquette представляет эдакое руководство по оптимальным видам рабочего процесса в приложении,которое способствуют эффективности и прозрачности в веб-дизайне. И что удивительно, созданные для Photoshop правила применяются мастерами, работающими и в приложении Sketch и в других, которые оперируют со слоями и предлагают инструменты для проектирования.
В руководстве существует несколько разделов: организация файлов, структурность слоев, экспорт материалов, использования текста, применение эффектов и фильтров, итоговая проверка качества готовой работы.
Если посетить сайт и поизучать его, то можно как раз и увидеть на нем многие давно известные истины и правила работы в приложении. Да, иногда это совсем простые руководства, как скопировать слой или дать название слою, сохранить его в отдельный файл. Об этом рассказывают и Adobe. Но если копнуть глубже, то можно найти в избытке весьма интересные советы и пояснения, касающиеся проектирования сайтов для разных устройств. Вплоть до стандартов выбора угла падения света и отбрасывания тени.
Рассмотрим некоторые интересные советы по дизайну и организации процесса в целом.
Единый PSD
Если вы работаете с несколькими страницами для сайта, то удобно использовать в одном PSD монтажные области. Тогда все данные можно хранить в одном документе (файле). Это поможет избежать путаницы среди множества отдельных файлов. Также можно использовать связные файлы и смарт-объекты. Но помните, что количество свободного места на жестком диске и в оперативной памяти играют не последнюю роль.
Совместный проект
С начала выпуска версии Creative Cloud и введения Связанных смарт-объектов дизайнеры получили невероятную возможность обмениваться файлами и данными между собой. Например, задача вашей команды создать шаблон главной страницы в Photoshop, но при этом один дизайнер может заниматься этим на своем компьютере, а другой – на своем. И каждый будет готовить свой объект (кто-то логотип, кто-то фоны или иконки и пр.). Уже затем, вы можете собрать все это воедино, выбрав через CC или присоединить как смарт-объект в свой основной PSD.
Структурирование
Создание простой структуры файлов – важно в особенности. Можно все и вся сохранять в одном файле, но иногда требуется оперировать с несколькими. И главное в этом, чтобы во всем пакете рабочих данных мог разобраться любой человек. Любой! Принято, что структура имени файла выглядит как Name_Type_Size_Version. Разберёмся?
Название компании – первое, что мы видим и на что обращаем внимание, когда работаем в сфере веб-дизайна и получаем много заказов. А потому это позволяет сортировать и отбирать нужное.
Тип – определение назначения файла. Что мы в нем создали (проект корзины интернет-магазина, форму обратной связи, внутреннюю станицу о компании и пр.)
Размер – обычно используется, только если внутри есть изображения, например баннеры, а они могут быть и 120Х600, и 300х300.
Версия – определяемая коротко, как v2/v3, представляет собой копии основного рабочего файла. Невозможно давать название «новый1», «последний», «Сайт4-финал-23.08.2017». Это – каша.
На практике правильные имена PSD файлов ведут к разумной организации своего рабочего процесса, устранению путаницы и даже к ускорению работы.
Перо
Знаете… джедаи и ситхи не были бы теми, кто они есть, без своих световых мечей. Это факт. Дизайнер без инструмента Перо – не совсем дизайнер. Без Пера многого не нарисуешь и не создашь. Но чем больше навыка при работе с вашим оружием, тем больше возможностей. И если в фехтовании одно из главных – память тела и мышц, то в Photoshop память пути Пера – это готовые объекты. Если вы создали хороший объект, кривую, завиток и прочее – сохраните на будущее. Его всегда можно изменить в размере и наклоне, но нарисовать заново может быть сложным. Как сохранять и рисовать мы уже рассказывали.
Грациозные эффекты
Как соблазнительно выглядит использование таких эффектов как Наложение цвета (Color Overlay), Тень (Drop Shadow), Тиснение (Bevel), Внешнее свечение (Outer Glow) и Штрихи (Strokes). В веб-дизайне важно понимать и осознавать, когда они полезны, а когда о них стоит забыть. Цель эффектов – дополнить дизайн уникальностью, что позволит ему выделиться на фоне конкурентов и предложить хороший пользовательский опыт. Ключ к такой эффективности – скрытность.
Если одинаковые эффекты стилей применяются к нескольким объектам – копируйте эти стили. И помните об общем параметре освещения. Если вы сомневаетесь в эффекте, выключите, удалите и забудьте. Спустя время, появятся новые идеи. Душа должна «лежать» к творимому.
Неиспользуемое
Знаете, мы частенько создаём эффекты на слоях, текстурки и прочее, а потом отказываемся от них или временно отключаем и забываем. Хорошая практика в том, чтобы собрать все это в отдельную папку, а потом изучать и забирать нужное. Назовите её как «Временное», «Неиспользуемое» или даже обычное Temp. Выключите видимость всех этих слоев и разметите в самом низу списка слоев.
Даже если вы вдруг решили удалить какой-то слой, повремените, переместите его в ту папку. А вдруг понадобится... Сохраняйте там все мелкие иконки, малые превью, попытки текстур или эффектов свечения, неона, вариации дуплекса.
Можно даже всю папку потом в отдельный PSD отправить и вставить привязку к основному рабочему.
Без предустановок
Мобильные устройства в своем многообразии обладают разными размерами экрана и разрешениями. Более того, Apple вообще любит постоянно менять их. Поэтому использование готовых предустановок Photoshop в качестве размера нового документа – не лучшее решение. Куда проще позволить вашему дизайну диктовать точки основы и их расположения там, где это более необходимо. Универсальность для разных мобильных устройств куда удобнее, чем маянье с разными версиями того же iPhone.
Многофункциональный SVG
Одновременно с тем, как в интернете стал преобладать векторный формат SVG, для дизайнеров стало решающим и его реализация в Photoshop. Экспортирование, создание, обработка – все это важно и необходимо. И более того, ухудшение качества не происходит. Photoshop позволяет изменять его под разрешения @2x/@3x и использовать в рабочих процессах для Retina-дисплеев.
.jpg)
Свет мой, тень моя
Использование теней в веб-дизайне не что-то особенное. Но как мы и говорили не раз, ошибки допускаются часто и разные. Повторяться уж не будем. Принципы Photoshop Etiquette обращают внимание, что в веб-дизайне свет может падать под углами: 900, 1200, 1800. Впрочем, и другие источники света допускаются.
Такие углы падения света позволяют теням быть реалистичными, особенно если вы решили работать с тяжёлыми тенями. То есть, черные (вариации серого) на белом фоне. Они наиболее яркие и бросающиеся в глаза. Если они будут падать с небольшими отклонениями или под разными углами, то восприятие всей композиции на подсознании человека чуточку иным.
Даже в OS тоже тени падают под четкими углами, и мы к этому зрительно привыкли. Дизайн сайтов должен соответствовать.
Сжатие
Производительность – один из столпов эффективности работы проекта и качества рабочего процесса дизайнера. Как часто вы задумывались о том, что же делать, если подобранный шрифт или изображение слишком тяжелы, а при открытии файла PSD происходит чуть ли не «подвисание» всей системы? Существуют сторонние инструменты, например, TinyPNG или те, о которых мы рассказывали ранее в наших подборках. Они сжимают изображения, словно вихри.
Но и сам Photoshop обладает возможностями сжатия. Поэтому Photoshop Etiquette определяет одно правило: производительность и сжатие не в ущерб качеству. Но использовать тяжеловесные данные – моветон.
Выводы
Одной из главных причин популярности Photoshop Etiquette является нахождение всех, определяющих работу дизайнера, принципов в одном месте. Тем более что все эти принципы будут важны еще не один год и не два. Его дополняют, изменяют с выходом новых версий и введения серьезных возможностей.
И его используют в коммерческих и частных организациях, на него опираются, благодаря ему строят командную работу. Создавать PSD файлы и макеты сайтов в Photoshop – это одно, но уметь грамотно представлять свою работу заказчику/начальству, организовывать сотрудничество – совсем другое.
Если вы привыкли работать по-своему – правила покажутся болью. Но если вы нацелены на рост возможностей, знаний и деятельности – то измениться и следовать им необходимо.
