Этикет Photoshop для отзывчивого веб-дизайна

  1. Дальнейшее чтение на SmashingMag:
  2. «Этикет» все еще актуален?
  3. Что нового в этикете Photoshop?
  4. 2. Совместная работа
  5. 3. Не дизайн для устройства
  6. 4. Быть неразрушающим
  7. 5. Будьте в курсе разрешения экрана
  8. 6. Сжать

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

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

В 2011 году все просто промокли от адаптивного веб-дизайна. Традиционный рабочий процесс comp-to-HTML только начинал подвергаться критике, и с тех пор мы увидели множество альтернатив. Стиль плитки , Стиль Прототипы , Визуальные Инвентаризация , Элемент Коллажи , руководства по стилю и даже проектирование в браузере - все это подходящие подходы к проектированию нескольких устройств. С переходом от постраничного дизайна к построению системы дизайна это действительно захватывающее время.

Дальнейшее чтение на SmashingMag:

Был также взрыв инструментов, пытающихся сделать отзывчивый рабочий процесс более эффективным. Такие приложения, как Webflow и Macaw, сделали визуализацию точек останова удобной для кода. Многие дизайнеры перешли из Photoshop в качестве рабочей лошадки в Sketch, Affinity Designer или тому подобное. Другие приняли такие приложения, как Keynote для создания прототипов.

Другие приняли такие приложения, как Keynote для создания прототипов

Шквал новых инструментов и техник, казалось бы, отодвинул старый добрый этикет на задний план.

«Этикет» все еще актуален?

С альтернативами тяжелому Фотошопингу, с которыми мы можем быть знакомы, можно задаться вопросом, нужен ли нам этикет. Ради этой статьи мы определим этикет как передачу файлов организованным, понятным и понятным способом. Адаптивный дизайн обычно состоит из множества движущихся частей, от изображений @ 2x, объединенных CSS-файлов и многого другого. На первый взгляд, для того, чтобы опубликовать веб-сайт, необходимо сделать его более эффективным, если мы хотим быть прибыльными.

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

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

Что нового в этикете Photoshop?

Этикет Photoshop получил новый слой краски от примыкающий , дизайн-студия в Сиракузах, штат Нью-Йорк. Для новичков в концепции Photoshop Etiquette - это руководство по передовому опыту, которое способствует повышению эффективности за счет ясности в веб-дизайне. Хотя эти принципы разработаны для Photoshop, многие из этих принципов применимы к Sketch и аналогичным инструментам проектирования на основе слоев.

Руководство разбито на следующие разделы:

  • Файловая организация
  • Структура слоя
  • Экспорт активов
  • Тип исполнения
  • Применение эффекта
  • Проверка качества

Те, кто знаком с сайтом, увидят много знакомых рекомендаций, таких как типичные советы, такие как «Назовите свои слои» и «Точные имена файлов», каждая попытка избавить от практики, такой как «Копия слоя 5» и «Клиент-копия». final-v3.psd 'соответственно. Если вы покопаетесь немного глубже, вы найдете множество адаптивных ресурсов, связанных с различными рекомендациями, и несколько советов по проектированию для нескольких устройств.

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

Если вы можете использовать его, попробуйте использовать артборды, композиции слоев или смарт-объекты вместо управления множеством PSD.

2. Совместная работа

С добавлением библиотек Creative Cloud и связанных смарт-объектов дизайнеры могут легко обмениваться ресурсами. Например, если вы создаете шаблон или руководство по компонентам в Photoshop, один дизайнер может работать с компонентом, в то время как другой дизайнер одновременно работает с другим. Эти компоненты могут совместно использоваться в библиотеке или как связанные смарт-объекты, которые извлекаются в главный PSD.

Эти компоненты могут совместно использоваться в библиотеке или как связанные смарт-объекты, которые извлекаются в главный PSD

Между связанными смарт-объектами и библиотеками CC существует множество возможностей для совместной работы.

3. Не дизайн для устройства

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

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

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

4. Быть неразрушающим

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

5. Будьте в курсе разрешения экрана

Говоря о SVG, он действительно стал отличным подходом к обслуживанию одного актива, который может адаптироваться к любому размеру и не потерять верность. Иметь Рабочий процесс Retina актива будь то изображения SVG или @ 2x / @ 3x, стало частью рабочего процесса отзывчивого практикующего.

6. Сжать

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

Сторонние инструменты, такие как   TinyPNG   сделали сжатие изображения бризом

Производительность - задача дизайнера. Убедитесь, что вы выдавливаете любой дополнительный размер файла из ваших изображений.

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

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

Вследствие неточностей Google Translate, есть также открытый призыв к добровольным переводам сообщества.

Интересно видеть, как этикет Photoshop вызвал отклик у многих организаций и частных лиц. Как это может помочь вам и вашей команде?

Похожие

01. ASP.NET - что это такое?
Многие считают Интернет-сеть одним из важнейших изобретений второй половины прошлого века. Он используется для различных целей большой частью человеческого населения. WWW-страницы (World Wide Web) являются одним из наиболее популярных и часто используемых сервисов, представленных в Интернете. За свою долгую карьеру они пережили своеобразную революцию. Вначале они содержали только статический текст, а позже, благодаря таким технологиям, как HTML, веб-графика стала появляться на веб-сайтах,
Футуристический дизайн автокресла Toyota
Автопроизводители постоянно стремятся повысить удовольствие от вождения, что приводит к появлению новых двигателей и современных мультимедийных систем. Между тем, для удобства путешественника наиболее важным элементом является кресло, на котором он сидит. Toyota решила сосредоточиться на дизайне кресла нового типа, которое было создано благодаря передовым алгоритмам и 3D-принтерам. Когда дело доходит
Xiaomi Mi5s Plus: полный тест
Новый широкоформатный вариант Mi5s от Xiaomi больше не имеет Samsung Galaxy S7 в поле зрения С диагональю 5,7 дюйма Mi5s Plus больше. В своем видоискателе
Все о нашем креативном боссе Себастьян Олмия
... вых поваров молодого поколения. Победитель второго выпуска программы TOP CHEF, самого популярного кулинарного шоу в Польше. Он приобрел опыт работы в лондонских ресторанах, где работал с крупнейшими поварами кухни мира - в том числе Гордон Рамсей или Томем Айкенс. БИО СЕБАСТИАН Креативный руководитель ресторана Бельведер. Победитель второго выпуска программы TOP CHEF, самого популярного кулинарного шоу в Польше.
Минобразования напомнило абитуриентам, без ID-карты не поступить в вуз
... для выпускников школ, которым этот документ нужен для дальнейшего поступления в вузы ", - говорится в сообщении Минобразования. Отмечается, что в Государственной миграционной службе по запросу МОН, информируют, что впервые паспорт гражданина Украины выдается не позднее чем через 20 рабочих дней со дня оформления заявления-анкеты на его получение. "Если со дня подачи заявления прошло больше времени, и ID-карты вы не получили, то нужно обратиться за разъяснением к соответствующему
Что такое клиентский серверный процесс (csrss.exe) и почему он запускается на моем компьютере?
Если у вас есть ПК с Windows, откройте свой диспетчер задач и вы обязательно увидите один
Как загрузить Mac в режиме Verbose
... устройства, такие как DJ-деки, накопители Thunderbolt, дигитайзеры и т. Д., Могут выявить проблемы в подробном режиме, проверяя сообщения, чтобы узнать, успешно ли загружена программная поддержка вашего периферийного устройства. , Если вам интересно - как уже упоминалось ранее, Verbose Mode позволяет вам заглянуть за кулисы и посмотреть, что именно происходит во время процесса загрузки MacOS. Опять же, поскольку ни одна функция не отключена или повреждена
8 скрытых инструментов в Windows 7, о которых вы все еще не знаете
Реклама Windows 7 это ни в коем случае не новая операционная система. Если факт, Windows 8 уже там и доступно
Не удастся заменить процессор без материнской платы в ближайшее время?
... в ближайшее время заменить большинство компонентов компьютера? Это выглядит так. Согласно последним новостям, процессоры на основе архитектуры Haswell следующего года будут последними, которые можно будет установить самостоятельно в материнскую плату. Процессоры Broadwell, которые должны появиться через два года, будут припаяны к материнской плате. Интеграция последующих элементов в CPU является нормальным процессом. Процессор
Kaspersky: вредоносная программа Shamoon не более чем «быстрая и грязная»
... для запуска других программ. " Включение изображения горящего флага в Википедии под первоначальным названием US_flag_burning.jpg считалось «преднамеренным» ключом к поиску изображения. Это образ, который используется для перезаписи основной загрузочной записи жестких дисков, хотя последний вариант также перезаписывает 192 КБ блоков данных случайно сгенерированной
Настройка этого домашнего VPN-маршрутизатора защищает ваш трафик, где бы вы ни находились
Пользователи компьютеров, смартфонов и планшетов сталкиваются со всеми видами угроз безопасности. Находясь дома или в офисе, вы частично защищены брандмауэром и другим программным обеспечением безопасности. Тем не менее, когда вы находитесь вдали от своих

Комментарии

А что ты делаешь с этим текстом?
А что ты делаешь с этим текстом? Сохранить как закладку в браузере, а потом забыть об этом? История закладок удаляется? Точно. Сначала нужно установить Pocket в браузере, например, Chrome или Firefox, а затем, находясь на странице, которую вы хотите отложить для последующего нажатия, щелкните по значку и опишите текст с помощью тега, например, «Китай» или «велосипед», который каким-либо образом размещает содержимое. разделы.
Мы уже знаем, на что обращать внимание при оптимизации SEO, но вопрос все еще в том, как это сделать?
Мы уже знаем, на что обращать внимание при оптимизации SEO, но вопрос все еще в том, как это сделать? Это в основном зависит от движка, на основе которого запускается страница. У каждого свои, разные механизмы для этого типа оптимизации, поэтому я не могу представить их всех. Сегодня мы сосредоточимся на оптимизации SEO сайта на основе WordPress, так как большая часть контента блога относится к этой системе CMS. WordPress изначально не имеет никакого значимого инструмента, который
Не приведет ли введение хэштегов к потопу Facebook с большим количеством контента, который Facebook еще не привлек из-за специфики?
Не приведет ли введение хэштегов к потопу Facebook с большим количеством контента, который Facebook еще не привлек из-за специфики? Будут ли пользователи использовать хэштеги, как в Твиттере, отправляя много сообщений? Или, может быть, это будет эффект, известный из Инстаграма? В
Что меня не устраивает?
Что меня не устраивает? Прежде всего, вы не можете установить свой собственный шаблон. Нет возможности модифицировать и адаптировать один из готовых, доступных шаблонов. Также давайте забудем о возможности установки даже проверенных и определенных дополнений. Там может быть по крайней мере база проверенных расширений, которые мы можем установить. «Goły» Joomla, на самом деле он подходит в основном для очень простого веб-сайта и, возможно, для блога (хотя
Знаете ли вы, что когда вы экспериментально нарушите его работу, вы, вероятно, не сможете правильно различать эмоции радости, глядя на другого человека?
Знаете ли вы, что когда вы экспериментально нарушите его работу, вы, вероятно, не сможете правильно различать эмоции радости, глядя на другого человека? О том, насколько важны мимические и лицевые мышцы, вы увидите ЭМГ. Электромиограф - это устройство, с помощью которого можно измерять электрическую активность мышц. Вы можете прочитать выражение лица партнера, глядя только на диаграмму электрической активности его мышц? Лежа по вызову Уже в средние века женщин,
Что означают эти два понятия?
Что означают эти два понятия? Так же, как вы являетесь клиентом банка и ведете в нем личный счет, банки подписывают соглашения между ними и взаимно управляют своими счетами. Счет loro - это счет, который ведется в иностранном банке местным банком в его национальной валюте. Счет ностро - это счет, который местный банк создает в иностранном банке в иностранной валюте. Например: Банк Англии хотел бы открыть счет в польских злотых в Польше и урегулировать транзакции
Все еще есть проблемы?
Все еще есть проблемы? Если у вас возникают проблемы при входе в режим Verbose, или это не помогает устранить проблемы, которые могут возникнуть на вашем Mac, попробуйте следующее: Я не могу войти в режим Verbose. Вы не сможете использовать режим Verbose, если владелец или администратор Mac включил функцию защиты паролем Open Firmware. Подробный режим не решил мою проблему. Ваша следующая лучшая ставка -
Почему же так произошло, что профессия со странным для большинства украинский названием, так стремительно начинает быть востребованной?
Почему же так произошло, что профессия со странным для большинства украинский названием, так стремительно начинает быть востребованной? Ответ прост. Каждая успешный человек и развитая личность не может жить без коммуникации. Человек - существо социальное, поэтому общение является неотъемлемой частью ее жизни. Мы живем в обществе, где самые необычные вещи могут случаться, когда
А кто сказал, что компьютерные игры не продаются?
А кто сказал, что компьютерные игры не продаются? Раньше я говорил, что хорошее производство всегда защищает себя. Даже на рынке, который подвержен риску пиратства и затруднен требованиями к оборудованию и большим количеством настроек. Учитывая, что Grand Theft Auto V предлагает потрясающую «игру в игру», то есть GTA Online, пиратство этого титула является огромной профанацией и просто стреляет себе в ногу.
Что, если удаленный или поврежденный файл является системным файлом?
Что, если удаленный или поврежденный файл является системным файлом? Об этом в следующем посте ,
Что произойдет, если вы проигнорируете все сигнальные огни и пропустили запланированные настройки обслуживания?
Что произойдет, если вы проигнорируете все сигнальные огни и пропустили запланированные настройки обслуживания? В конце концов ваша машина сломается. Что-то перестанет работать, и вы, вероятно, будете вынуждены потратить много денег, чтобы решить проблему, которой можно было бы избежать вообще, если бы вы следовали рекомендованному графику обслуживания. Другими словами, игнорирование предупреждающих знаков и принуждение к ремонту сломанной машины обходится дороже, чем регулярная

Что нового в этикете Photoshop?
«Этикет» все еще актуален?
Что нового в этикете Photoshop?
Как это может помочь вам и вашей команде?
NET - что это такое?
В ближайшее время заменить большинство компонентов компьютера?
А что ты делаешь с этим текстом?
Сохранить как закладку в браузере, а потом забыть об этом?
История закладок удаляется?
Мы уже знаем, на что обращать внимание при оптимизации SEO, но вопрос все еще в том, как это сделать?