Навигация по сайту

Популярные статьи

Облако меток

Рекомендации по подготовке файлов Photoshop для веб-разработчиков

  1. 1.0 Введение
  2. 2.0 Подготовка файла
  3. 2.1 Руководства и макет
  4. 2.2 Включить цветовую палитру / список или руководство по стилю
  5. 3.0 Общие элементы
  6. 5.0 Сглаживание иллюстраций
  7. 5.1 Слияние слоев
  8. 5.2 Шрифты
  9. 5.2.1 Тестирование шрифтов
  10. 5.3 Оптимизация изображения
  11. 5.4 Смарт-объекты (векторные и растровые) *
  12. 5.5 Фоновые изображения
  13. 6.0 Организация панели слоев
  14. 6.1 Назовите все слои
  15. 6.2 Базовая структура папок
  16. 7.0 Завершение файлов
  17. 8.0 Контрольный список
  18. об авторе

Последнее обновление: 31.12.2017

1.0 Введение

Этот документ содержит общие рекомендации для арт-директоров по настройке файлов Photoshop для передачи веб-разработчикам для программирования веб-страниц.

Хотя процесс разработки, как правило, очень структурирован, напротив, процесс проектирования довольно часто является спонтанным и полным экспериментов. Это может привести к появлению множества неиспользуемых и неназванных слоев, которые не станут частью окончательно утвержденного проекта. Для разработчиков просеивание множества неназванных слоев (слой 1, копия слоя 23 и т. Д.) Может сбивать с толку и занимать много времени.

Вернуться к содержанию

2.0 Подготовка файла

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

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

2.1 Руководства и макет

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

  • заголовок
  • Область содержимого
  • Боковая панель
  • нижний колонтитул

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

2.2 Включить цветовую палитру / список или руководство по стилю

Создайте группу слоев в файле Photoshop или документ Word со списком цветов и стилей, особенно тех, которые отсутствуют в файлах PSD, таких как состояния наведения для текстовых ссылок. Руководство по стилю и / или цветовая палитра / список могут определять общие компоненты страницы сайта, такие как размер и стиль шрифта для основного текста, заголовки страниц, подзаголовки и т. Д.

Кроме того, если клиент предоставил спецификации бренда для разработки своих веб-сайтов, укажите их.

Кроме того, если клиент предоставил спецификации бренда для разработки своих веб-сайтов, укажите их

Вернуться к содержанию

3.0 Общие элементы

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

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

Вернуться к содержанию

Элементы навигации иногда упускаются из виду, но должны иметь как минимум два, а может и три состояния взаимодействия с пользователем, которые разработчик должен будет определить в таблице стилей. Поместите каждое состояние в собственное имя слоя, чтобы оно соответствовало его функции, например, topnav, topnav: hover и т. Д. Это также должно быть сделано для кнопок любого типа. Как упомянуто позже в этом документе, эти элементы должны быть сгруппированы в их собственную папку.

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

Вернуться к содержанию

5.0 Сглаживание иллюстраций

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

5.1 Слияние слоев

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

5.2 Шрифты

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

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

Шрифты, которые не считаются веб-безопасными ( список веб-безопасных шрифтов ) могут быть доступны в виде веб-шрифтов на веб-сайтах ниже. Пожалуйста, проверьте наличие, прежде чем использовать эти шрифты в дизайне. Как и с изображениями и другими носителями, проверьте лицензию на шрифт, который вы хотите использовать, прежде чем применять его. Многие шрифты еще не лицензированы для такого использования в Интернете, поэтому уведомите об этом шрифты Digital Project Manager и UI Developer.

5.2.1 Тестирование шрифтов

Тот факт, что шрифт можно использовать в Интернете, не означает, что его следует использовать для всего содержимого сайта. Некоторые шрифты были разработаны, чтобы хорошо работать на экране, но не все шрифты были, особенно при использовании этих шрифтов в небольших размерах. Рекомендуемое использование этих шрифтов - использовать их для заголовков и специальных типов элементов, а не для всего содержимого. Проверьте шрифты на следующем сайте: Шрифт Dragr , Перетащите файл шрифта на страницу, и текст изменится на этот шрифт.

5.3 Оптимизация изображения

Все изображения должны быть запущены через инструмент оптимизации изображений, чтобы уменьшить их размеры для Интернета. Во многих случаях размеры файлов изображений могут быть значительно сокращены, что приводит к ускорению загрузки и помогает пользователю получить наилучшие результаты. Это также будет продолжать придерживаться нашего Бюджет производительности , Для этого есть различные инструменты, включая (но не ограничиваясь):

Для получения дополнительной информации об оптимизации изображений, пожалуйста, смотрите Google оптимизация изображения предложения.

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

Наш бюджет производительности:

  • HTTP-запросы: ~ 60-70
  • Совокупный вес страницы: ~ 750-950 КБ

5.4 Смарт-объекты (векторные и растровые) *

При использовании смарт-объектов в файле Photoshop, дизайнер должен растеризовать или объединить с другими слоями, чтобы уменьшить общий размер файла, поскольку смарт-объекты часто могут содержать фотографии или другие графические объекты, которые, скорее всего, будут иметь более высокое разрешение (например, 300 точек на дюйм), чем требуется для окончательного вывода. Другой причиной выравнивания этих смарт-объектов является предотвращение сообщения об ошибке «Файл не найден» в случае, если разработчик дважды щелкнет слой смарт-объекта.

Если вы разрабатываете значок, создайте его в иллюстраторе и вставьте как смарт-объект.

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

5.5 Фоновые изображения

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

Вернуться к содержанию

6.0 Организация панели слоев

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

6.1 Назовите все слои

Пройдите все слои и назовите слои и группы слоев. Используйте соглашение об именах, которое не только хорошо известно, но и является общим для вашей рабочей среды. Одним из примеров может быть назначение имен слоев, которые предоставляют полезные описания, такие как «основная навигация по состоянию» или «кнопка: наведение» . Другими примерами соглашений об именах могут быть такие разделы, как заголовок, содержимое, нижний колонтитул и т. Д.

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

Этот шаблон может содержать сеточную систему, базовую структуру папок и общие размеры, такие как ширина страницы

Вернуться к содержанию

6.2 Базовая структура папок

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

В каждой папке могут быть добавлены подпапки и слои для каждого подпункта или элемента. Например, раздел заголовка может иметь «логотип», «заголовок» и / или «изображение заголовка» и т. Д.

Внутри навигации слои или папки могут иметь состояния «зависание», «выключено» и «включено».

Вернуться к содержанию

7.0 Завершение файлов

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

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

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

8.0 Контрольный список

  • Спецификации брендинга компании
  • Убедитесь, что цвета одинаковы во всех PSD
  • Используйте одни и те же шрифты последовательно во всем дизайне
  • Пиксели должны использоваться при определении размера шрифтов вместо точек
  • Все слои имеют имена и помещаются в групповые папки, когда это применимо.
  • Все общие изображения одинакового размера
  • Любые специальные инструкции
  • Hover, Active и / или Visited состояния указываются для ссылок и кнопок
  • Перечислите шрифты, будь то веб-шрифты или не-веб-шрифты, сбоку на главной странице с помощью «инструмента заметок»
  • Для более подробной информации, пожалуйста, обратитесь к: http://photoshopetiquette.com/

об авторе

Дебора Фёрст - старший разработчик TMP Worldwide , Если у вас есть какие-либо вопросы или вы просто хотите поговорить в магазине, не стесняйтесь связаться с ней по Github или через Эл. адрес ,