Хотите, чтобы ваши зубы застряли в проекте дизайна веб-сайта, чтобы отточить свои навыки? Следуйте этому пошаговому руководству, чтобы создать стильный дизайн веб-сайта для вымышленной компании по производству очков. В первой части урока мы создадим концепцию дизайна Photoshop с темной цветовой схемой и разместим содержимое в сплошную базовую сетку.
Вот полный веб-сайт, который мы будем создавать. Это гладкий дизайн с тонкими градиентами и эффектными изображениями, основанный на общей темно-черной / серой цветовой гамме. Весь сайт выложен в соответствии со сплошной сеткой, которая помогает сбалансировать элементы страницы.
Посмотреть крупномасштабную концепцию дизайна сайта
Вымышленным клиентом, который я разработал для этого учебного проекта, является небольшой бренд очков под названием OPTIK. Они хотят, чтобы сайт демонстрировал их ассортимент. Он должен отражать элегантный стиль их спортивных очков и направлять пользователя к четырем моделям. Предоставлена подборка фотографий, для демонстрации которых необходимо представить продукты, в противном случае вы, дизайнер, можете свободно управлять общей планировкой и дизайном. Если вы хотите заполнить свой портфель проектов или если вы ищете проект, который можно использовать в качестве практики / эксперимента, не стесняйтесь использовать этот вымышленный клиент в качестве основы для ваших собственных проектов.
Дизайн, который мы будем создавать в рамках этого урока, начинается на бумаге в виде эскиза с простых заметок. Всегда стоит перечислить элементы, которые требуются на странице, чтобы вы могли освободить место и заказать все по важности. Простой эскиз подчеркивает общий макет и дает нам четкое направление, когда мы открываем Photoshop.
Создайте новый документ в Photoshop. У меня есть готовый шаблон, который я использую, который уже содержит столбцы, желоба и базовую сетку размером 24 пикселя. Используйте удобный генератор из http://grid.mindplay.dk, чтобы создать свой собственный, или, если вы являетесь участником Access All Areas , просто загрузите исходный файл и сохраните его для ваших будущих проектов.
Заполните фон черным, а затем используйте зигзагообразный рисунок из моей бесплатной линии шаблонов пикселей Line25, чтобы заполнить новый слой. Инвертируйте выделение, измените режим на Screen и уменьшите непрозрачность до 10%.
Нарисуйте выделение в центре документа, измеряя всю ширину сетки, и залейте его черным цветом на новом слое.
Откройте окно стилей слоя и измените настройку «Тень», чтобы создать мягкий серый оттенок позади панели содержимого.
Вставьте логотип OPTIK и выровняйте его по сетке, охватывая три столбца и выровняв базовую линию текста по базовой сетке. Здесь я использую оригинальную векторную версию, но я уверен, что небольшое действие волшебной палочки в JPEG выше позволит вам использовать тот же логотип.
Придайте логотипу отличную обработку в виде тонкого серого градиента и очень легких эффектов Bevel и Emboss, чтобы придать базовый металлический стиль.
Используйте текстовый инструмент, чтобы напечатать меню навигации вдоль той же базовой линии, при этом каждый элемент выравнивается по столбцу. Установите стиль шрифта в верхний регистр 14pt Helvetica со светло-голубой заливкой.
Нарисуйте тонкий фрагмент по ширине панели содержимого и заполните его тонким градиентом. Дублируйте и переверните этот градиент и измените его расположение, чтобы выделить область функций в верхней части дизайна главной страницы.
Вставьте первый из так называемых снимков продукта, который на самом деле представляет собой фотографию крутого парня в солнечных очках, любезно предоставленного ThinkStock . Масштабируйте изображение по размеру, чтобы оно соответствовало области объекта.
Нарисуйте выделение и создайте маску слоя, чтобы скрыть ненужные части изображения, оставляя панель элементов стиля почтового ящика.
Используйте сетку для выравнивания некоторого содержимого, относящегося к изображению объекта. Здесь логотип Hydro-tek был импортирован из Illustrator с использованием того же шрифта Eurostile , а основной текст добавлен в Photoshop как # 9d9d9d 16pt Helvetica.
Используйте инструмент «Прямоугольник со скругленными углами», чтобы нарисовать основную форму кнопки, затем оживите ее с помощью градиента и точного обводки в 1 пиксель. Цвета были выбраны из изображения, чтобы связать все вместе, сохраняя основной оттенок синим, чтобы обеспечить узнаваемый и согласованный цвет между всеми активируемыми элементами и ссылками.
Нарисуйте четыре поля под областью объектов, выравнивая их размер в соответствии с сеткой. Заполните все четыре коробки черным.
Откройте окно стиля слоя и дайте прямоугольникам тонкий градиент серого и обводку в 1 пиксель, чтобы определить их контур. Эти четыре поля будут связаны с четырьмя основными связями Sun, Sport, Tech и Special.
Импортируйте изображение, относящееся к ассортименту продукции Sun, и обрежьте его по размеру с помощью маски слоя, чтобы оно поместилось в маленькое поле содержимого. Это конкретное изображение является еще одним из ThinkStock .
Дублируйте слой изображения, затем перейдите в Image> Adjustments> Hue / Saturation. Уменьшить насыщенность примерно на 60%. Мы сохраним оба слоя, чтобы создать крутой эффект наведения на окончательно закодированном веб-сайте.
Введите краткий описательный абзац, касающийся ассортимента продукции, за которым следует ссылка на призыв к действию в обычном синем цвете привязки.
Завершите эти маленькие поля с изображениями и контентом, относящимся к разделам «Спорт», «Техника» и «Специальный». Больше фотографий из Think Stock использовалось вместе с креативной фотографией от Flickr от Monsalvador .
Под основной панелью содержимого используйте текстовый инструмент, чтобы выложить некоторые типичные элементы нижнего колонтитула, такие как уведомление об авторских правах, дополнительные ссылки и привязку к началу страницы.
Сделайте шаг назад и посмотрите на дизайн с включенной и выключенной сеткой. Выравнивание всех элементов по столбцам и базовой сетке помогает добиться идеального горизонтального и вертикального потока, причем каждый элемент страницы аккуратно выравнивается.
Окончательная концепция PSD теперь готова для создания полностью работающего веб-сайта. Если вы хотите перейти к следующему шагу, ознакомьтесь со второй частью моего блога по веб-дизайну Line25 . В части учебника по кодированию мы создадим концепцию домашней страницы в HTML и CSS.
Узнайте, как создать сайт в HTML / CSS
 (Пока оценок нет) Загрузка... |
