Разработка интерактивных веб-страниц с помощью Photoshop не самая удобная работа. Постоянное создание новых документов и перемещение их компонентов могут быть очень утомительными и трудоемкими. Создатели и одно из последних обновлений программного обеспечения решили сделать это немного проще для нас, чтобы создавать области редактирования.
Хотя идея показалась интересной, так как введение этой функциональности каким-то образом я не мог понять, как ее использовать в коммерческой работе, я боялся некоторых непредвиденных проблем при создании и изменении элементов проекта. Как оказалось, новая функциональность довольно интересна, и ее использование удобное и интуитивно понятное. Хотя он не лишен дефектов (и на самом деле его довольно много), его можно легко использовать для гибкого дизайна.
Для этого урока я создал простой дизайн сайта для бегуна. Я использовал эту фотографию из Fotolia: 1, 2, 3. Она состоит из заголовка, информационной панели, двух текстовых блоков, контакта и нижнего колонтитула. Я решил использовать сетчатый макет, который растянулся по всей ширине экрана и не имел полей, чтобы лучше показать вам, чего мы можем достичь с помощью областей композиции.
Первый вид
Я начал создавать веб-сайт, создавая базовый вид шириной 1440 пикселей. Мы можем выбирать размеры области композиции из множества предопределенных, наиболее распространенных разрешений экрана.
После создания наши глаза будут мягко заменены на рабочую зону. Разницу можно увидеть прежде всего в самой плоскости проектирования, так как названы области, фон также изменен. Элементы и инструменты, специфичные для композиции, будут подробно описаны при создании этого руководства.
Я не буду описывать шаг за шагом создание этого проекта, но я сосредоточусь на некоторых интересных функциях Photoshop, которые являются либо новыми, либо просто еще не описаны в моих руководствах.
Начнем с создания гриды для нашего проекта. Я использовал плагин Guide-Guide, но в течение некоторого времени Photoshop имеет свой собственный встроенный инструмент для их создания. Он находится в меню в меню «Вид» → «Новый макет гидов».
Как я упоминал ранее, в моем случае я решил создать тот, который состоял из 12 столбцов, растянутых до полной ширины экрана и не разделенных никакими полями. Вы использовали шрифты, которые вы, возможно, знаете из наших бесплатных шрифтов, Sen (Sans serif) и Sensei Medium (написано). Конструкцию и ее расположение на созданной сетке можно увидеть ниже. Он основан на 12 строках, в которых содержимое распространяется по группам из 1, 2 и 3 столбцов.
При создании просмотров также полезно правильно назвать области композиции, я решил изменить имена по умолчанию по ширине. Для этого дважды щелкните имя на панели слоев и измените его (оно также автоматически перезапишет имя в рабочей области).
Создать больше разрешений
Следующим шагом, с которым мы сталкиваемся, является создание более отзывчивых представлений. Первое, что я решил сделать, это самый большой план, который у меня есть, поэтому 1920 пикселей. Существует два способа создания составных рабочих пространств — либо добавлять новые рабочие пространства, пустые области, либо копировать существующие рабочие пространства. В зависимости от того, сколько изменений мы ожидаем, нам нужно решить, какой вариант лучше. Для меня, в большинстве случаев, копирование работает лучше.
Просто на панели слоев щелкните правой кнопкой мыши и выберите Дублировать область композиции ….
Мы можем сразу вызвать вновь созданную область или оставить имя по умолчанию и изменить ее позже. В этом случае я знаю, что следующая резолюция будет равна 1920 px, но если вы сделаете прыгающие страницы в местах, где вы не совсем уверены, вы должны оставить их до конца. Новая область композиции будет на предыдущей, поэтому ее нужно перемещать (как обычный слой).
Следующий шаг — настроить размер элементов на выбранное разрешение. В этом конкретном случае было бы лучше всего сосредоточить все содержимое страницы, а затем создать сетку на тех же условиях, что и раньше, и адаптировать ее к ней. Хотя центрирование тривиально (и каждый из вас, безусловно, справится с этим), невозможно создать соответствующие линии помощи с использованием вышеупомянутого инструмента.
В текущей версии Photoshop руководства создаются для всего рабочего пространства. Таким образом, мы находимся в идеальной ситуации, когда мы создаем первый проект, но позже каждый последующий макет уже учитывается в целом (для ширины всех представлений). Это правда, что мы можем преодолеть эту проблему с полями, но в каждой области увеличивается количество добавок, и этот способ их создания идет к цели.
В этом случае я решил вернуться к своим корням и наложить прямоугольники, которые помогут мне создать дополнительные пособия.
Как только они будут готовы, мне нужно перенести их в свой проект с более высоким разрешением. Еще раз, я могу сделать это двумя способами — либо перетащить из одной области в другую (слои будут автоматически переходить в верхнюю часть списка в области композиции, в которой они сейчас находятся), либо переместить их только в слои. Применяется к новой области — так что если что-то было в правом верхнем углу с разрешением 1440, то после его перемещения в 1920 оно также будет там).
Теперь вам просто нужно растянуть слои и применить к ним направляющие.
Линии применяются ко всему рабочему пространству вместе. Для вашего удобства и порядка изображения должны быть распределены по горизонтали, чтобы вертикальные изображения не перекрывались. Вы также должны быть экономными при использовании горизонтальных линий, так как они могут ввести вас в заблуждение для разных разрешений. На конференции Adobe MAX было объявлено о введении отдельных строк для каждой области, поэтому эта проблема скоро будет решена.
Дизайн для 1920 пикселей представлен на изображении ниже. В дополнение к настройке текста и графики на сетки я увеличил высоту заголовка, чтобы сделать его более привлекательным.
Затем мы создаем одно и то же разрешение либо путем копирования, либо с помощью панели области композиции. Он доступен под инструментом «Перемещение», в самом верху меню или под V.
Как и в первом представлении, здесь мы имеем много различных предопределенных разрешений, и мы также можем ввести наши собственные значения. Кроме того, области композиции имеют три варианта, которые мы можем включить или отключить. По умолчанию все включены.
Автоматические слои вложенности — позволяет включать в список слоев, назначенных для перемещенной композиции (я уже упоминал об этом раньше). Если флажок снят, перемещенный элемент будет скрыт, если он не находится в области, видимой для вашей собственной группы.
Автоматический размер рабочего пространства. Позволяет увеличить или уменьшить рабочее пространство, чтобы покрыть всю композицию. Другими словами, это позволяет увеличить его при добавлении новых макетов композиции в макет. Когда выключено — когда мы создаем новую область и перемещаем ее достаточно далеко, она может стать невидимой.
Сохранять относительные позиции при изменении порядка слоев — также упомянутую выше функцию, которая заставляет ее меняться с поверхности на поверхность при перетаскивании элементов из одной области в другую. Если отключено, элемент, который изменяет положение на слоях, останется в том же месте в рабочей области.
Благодаря этим знаниям никто не должен иметь больше проблем при настройке вашего проекта на правильное разрешение. Ниже моих проектов для 1366 px и 1024 px.
И два разрешения сотовой связи, которые, в свою очередь, уменьшают количество используемых колонок.
И поэтому мы создали отзывчивый веб-проект в Photoshop. Он состоит из 6 разрешений в одной области, весь файл занимает 85 МБ (содержит большие изображения как интеллектуальные объекты).
Экспорт и передача файлов
Если мы создадим для себя, это еще не конец работы. Нас ждут еще два этапа — показ клиенту проект и передача его в кодировку.
Когда мы создаем отзывчивые проекты с помощью монтажных панелей, это может быть намного проще, чем прежде, чтобы сохранить их в виде файлов JPG. Мы можем сделать это несколькими способами — либо с помощью быстрого инструмента, либо немного дольше, и с большим количеством возможностей экспорта.
Это также большой плюс, что мы можем сохранить все области сразу — просто пометить их и сделать точно такие же шаги, как и для одного.
Используя панель, мы можем настроить качество файла, его размер и расширение. Предварительный просмотр также может быть сгенерирован с использованием других параметров, таких как возможность генерации ресурсов изображения путем их переименования в расширение.
Если вы хотите интересно показать проект своего клиента, используйте наш учебник по созданию отзывчивой презентации.
В будущем нам нужно передать файлы программисту. Конечно, если у вас есть подписка на Creative Cloud — проблема с вашей головой, есть очень хороший шанс, что она другая. К сожалению, у программы нет простого варианта для сохранения всех областей композиции для разделения файлов PSD. Но мы можем сделать это довольно просто, превратив каждый из них в умный объект, а затем записывая в PSB (позже вы можете конвертировать в PSD). Это не самый быстрый вариант, но он не должен занять слишком много времени. Не забудьте отменить свои изменения в конце! Все файлы, хранящиеся в формате PSB, весят около 100 МБ.
Слово о производительности
Решение поставить столько проектов в одной области, казалось бы, подавляющим для компьютеров. В моем случае я не замечал особых задержек, особенно в этом простом проекте (малый появился в другом, над которым я работаю, состоящий из 17, гораздо более сложных областей композиции), поэтому все зависит от сложности дизайна и мощности компьютера. С моим небольшим специализированным наблюдением, похоже, вам просто нужно много оперативной памяти.
Это имеет смысл?
Как и все, да и дизайн ответственно могут быть хорошими и плохими как в последнем Photoshop, так и в старой версии CS. Рассматривая этот урок, а также мои последние приключения с композициями, я должен признать, что использование их определенно ускорило процесс создания отзывчивого сайта и сократит время, необходимое для внесения каких-либо исправлений. Мне кажется, что в дополнение к анонсированным новостям Adobe MAX они позволят нам создавать проекты простым, удобным и эффективным способом или, по крайней мере, я надеюсь, что это произойдет.