Учебник: как создать макет веб-страницы с помощью Adobe Photoshop

Существует огромное количество инструментов для создания веб-страниц и работы с ними совершенно простым и функциональным способом, не вводя и не касаясь кода. Их бесчисленное множество, предлагаемые приложениями (Adobe Dreamweaver является примером) или напрямую онлайн-платформами, такими как Wix. Однако для веб-дизайнера важно знание ручных процедур. HTML5 и CSS - это основа верстки веб-сайтов и целевых страниц.

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

Начнем с дизайна нашего каркаса

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

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

Чтобы создать наш каркас, первое, что нам нужно сделать, это войти в приложение Adobe Photoshop и указать размеры, которые мы хотим, чтобы наша страница имела. В этом примере наша страница будет иметь ширину 1280 пикселей. Однако проблема с размером может варьироваться в зависимости от конечного пункта назначения или устройства, на котором мы хотим воспроизвести нашу страницу. Несомненно, чтобы веб-дизайн был функциональным и эффективным, он должен быть отзывчивый и он должен адаптироваться ко всем устройствам на рынке. Однако в этом случае мы будем работать над созданием прототипа, который мы собираемся воспроизвести на настольном компьютере. Тем не менее, проблема реагирования будет обсуждаться позже, а пока вот иерархия размеров экрана для работы в этом примере. Имейте в виду, что в этом случае мы сделаем макет целевой страницы в Adobe Photoshop, а затем перенесем его в HTML5 И CSS3. Цель этого небольшого упражнения - преобразовать дизайн, созданный в Photoshop, в удобный и интерактивный веб-дизайн, который реагирует на движения пользователя.

Измерения для мобильных телефонов

iPhone 4 и 4S: 320 x 480

iPhone 5 и 5S: 320 x 568

iPhone 6: 375 x 667;

iPhone 6+: 414x736

Нексус 4: 384 x 598

Нексус 5: 360 x 598

Галактики S3, S4, S5: 360x640

HTC One: 360 x 640

Таблетки измерения

iPad всех моделей, а также iPad Mini: 1024 x 768

Galaxy Tab 2 и 3 (7.0 дюймов): 600 x 1024

Galaxy Tab 2 и 3 (10.1 дюймов): 800 x 1280

Нексус 7: 603 x 966

Нексус 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366;

Microsoft Surface W8 Pro: 720 x 1280

Измерения для настольных компьютеров

Маленькие экраны (например, в нетбуках): 1024 x 600

Средние экраны: 1280 x 720/1280 x 800

Большие экраны: ширина более 1400 пикселей, например, 1400 x 900 или 1600 x 1200.

Чтобы приступить к распределению элементов и назначению разделов в нашем веб-макете, очень важно, чтобы мы приняли во внимание пропорции, чтобы обеспечить читабельный и мелодичный финал. Очень важно, чтобы вы использовали параметры правил и руководств, которые можно найти в верхнем меню «Просмотр». Чтобы работать пропорционально и точно, лучше всего работать в процентах. Мы нажмем на меню просмотра, а затем на опцию «Новое руководство», чтобы выбрать модальность разделения. В этом случае мы сделаем четыре вертикальных деления на 25% и будем использовать их в качестве ориентира для размещения наших изображений в нижнем колонтитуле и изображения нашего логотипа в верхнем колонтитуле.

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

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

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

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

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

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

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

Структуры 1, 2, 3 и 4 будут частью фон нашей веб-страницы, поэтому на самом деле нам не нужно будет экспортировать как таковой из Adobe Photoshop, хотя мы можем это сделать, но это не обязательно. Когда дело доходит до Плоские цвета (Одна из важных особенностей плоского дизайна и материального дизайна, их можно идеально применять через код с использованием таблицы стилей CSS). Однако остальные элементы необходимо сохранить для последующей вставки в наш HTML-код. На этой небольшой диаграмме мы также воспроизвели области, относящиеся к фону страницы, чтобы у нас было четкое представление о том, каким будет окончательный вид нашего сайта.

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

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

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

• Наш логотип.
• Все кнопки (те, что входят в главное меню и остальные).
• Все изображения.

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

• Во-первых, вы должны перейти в папку, в которой находится файл PSD, содержащий наш каркас, и продублировать его столько раз, сколько элементов, которые вы собираетесь экспортировать. В данном случае мы создали 12 копий оригинала и сохранили их в той же папке. Затем вы переименуете каждую из копий и присвоите каждой из них имя содержащегося в ней элемента. Наши 12 копий будут переименованы: Логотип, кнопка меню 1, кнопка меню 2, панель поиска, верхняя кнопка 1, верхняя кнопка 2, верхняя кнопка 3 и верхняя кнопка 4. Остальные четыре будут переименованы как: Изображение 1, Изображение 2, Изображение 3 и Изображение 4.
• Как только это будет сделано, мы откроем файл с названием логотипа.
• Мы перейдем к палитре слоев и найдем слой, содержащий наш логотип. Затем мы нажмем Ctrl / Cmd пока мы щелкаем по миниатюре указанного слоя. Таким образом, логотип будет выбран автоматически.
• Следующим шагом будет сказать Photoshop, что мы хотим вырезать этот логотип точно. Для этого нам нужно будет только вызвать инструмент обрезки с помощью клавиши или команды C.
• Как только мы это сделаем, мы нажмем кнопку Enter, чтобы подтвердить вырез.
• Теперь мы перейдем в верхнее меню «Файл» и нажмем «Сохранить как». Выберем имя, которое в данном случае будет «Logo», и назначим формат PNGза то, что это файл самого высокого качества в Интернете.
• Повторим процесс со всеми копиями и элементами. После обрезки убедитесь, что остальные слои в нашей палитре невидимый или устранены. Таким образом мы можем сохранить каждый элемент с прозрачным фоном.

В этом случае мы выбираем нашу кнопку меню 2 из палитры слоев. На скриншоте видно, как автоматически были выбраны лимиты нашей кнопки.

Как только мы выберем инструмент обрезки с помощью клавиши C, наш холст уменьшится только до размеров нашей кнопки.

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

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

Резюме:

1. Дизайн структура веб-сайта, уделяя особое внимание контенту, который вы хотите передать, и разделам, которые вы должны создать на своем веб-сайте.
2. Работайте над своим скелетом или каркасные из Adobe Photoshop с указанием, в каких областях будет отображаться содержимое и их формат.
3. Опираясь на меры и бренды, которые вы разработали ранее, начните разрабатывать поверхность сети. Включает в себя все элементы (как плавающие, так и фиксированные). Не забудьте добавить соответствующие кнопки, логотип и изображения.
4. Вырежьте все элементы, входящие в проект, по одному. Убедитесь, что у них есть правильные меры и что они не доставят вам проблем позже.
5. Сохраните все элементы в формате PNG в папке изображений внутри папки проекта HTML.
6. Имейте в виду, что этот проект будет выводиться в веб-окно, поэтому очень важно, чтобы вы приняли во внимание цветовой режим и применили RGB.
7. Вдохновляйтесь другими веб-страницами, которыми вы восхищаетесь, прежде чем приступить к работе, и не забудьте обсудить это с членами вашей команды. Если это проект для клиента, постарайтесь придерживаться брифинг так далеко, насколько возможно.