Шаг за шагом создадим шаблон дизайна сайта, который навеянный темой сноубординга и с использованием шероховатой текстуры и с добавлением к проблемным участкам элементов с помощью инструмента "Кисть".
Идеи, исследование, эскизы:
Вставьте текст в основной документ веб-дизайна и масштабируйте. Помещайте слова между колонками и идеально положите на базовую сетку.
Под этим главным хедером второстепенный контент может появиться. Используйте хедеры для создания четких визуальных якорей, чтобы привлечь глаз и дать немедленное признание содержания Манипулируйте текстом, используя слитное написание и нижний регистр, и нарисуйте маленькие иконки с помощью инструмента "Карандаш" и "Стирательная резинка" для резервного копирования с формулировкой визуальной подсказки.
Ниже этого контента мы выкладываем некоторые элементы, которые охватывают ширину обоих столбцов. Выложите некоторые портреты, чтобы создать раздел "Встречайте нашу команду". Добавьте небольшой белый штрих и тонкую падающую тень, чтобы создать видимость осязания фотографий.
Вращайте каждую с фотографий, чтобы создать впечатление фотографий, которые небрежно размещены на странице.
Продолжайте в таком же духе случайно-легкомысленного дизайна, написав имена каждого из команды прописным шрифтом.
Чтобы окончить дизайн, копируйте выделенную область с текстуры, используемую в зоне хедера. Переместите ее позади нижней части панели контента.
Измените стиль слоя и непрозрачность, чтобы снизить эффект и смешать цвета, потом используйте маску слоя, чтобы позволить текстуре выглядывать с центра панели.
Источник: http://line25.com/tutorials/create-a-gnarly-snowboarding-themed-web-design
Вот мои результаты:
Начнем с создания основной (колоночной) сетки для размещения на ней элементов нашего дизайна, потом, используя смесь фотографий и манипуляций в программе Фотошоп, создадим концепцию веб-дизайна для вымышленного бренда под названием "Снежная конфета".
А вот мои наброски:
Хорошее место для создания любого дизайна - это альбом-тетрадь для эскизов. Перед тем, как открыть Фотошоп, я выделяю некоторое время, чтобы записать ключевые слова, создать бренд "Снежная конфета". Сайт должен иметь цель: представить запланированные события, недавние видео, основные направления, которые могли бы отправить пользователя глубже в веб-сайте (то есть заинтересовать). Затем я делаю наброски потенциального макета, который уравновешивает элементы страниц и обрисовывает мои идеи использования большого графического заголовка, чтобы поймать и привлечь внимание зрителя.
Создание сетки, лежащей в основе:
Использование сетки, на которой будет размещаться Ваш дизайн, это первоочередной принцип создания дизайна, который поможет сохранить баланс и единство его.
Хорошее место для создания любого дизайна - это альбом-тетрадь для эскизов. Перед тем, как открыть Фотошоп, я выделяю некоторое время, чтобы записать ключевые слова, создать бренд "Снежная конфета". Сайт должен иметь цель: представить запланированные события, недавние видео, основные направления, которые могли бы отправить пользователя глубже в веб-сайте (то есть заинтересовать). Затем я делаю наброски потенциального макета, который уравновешивает элементы страниц и обрисовывает мои идеи использования большого графического заголовка, чтобы поймать и привлечь внимание зрителя.
Создание сетки, лежащей в основе:
Этот конкретно описываемый дизайн основывается на простом 12-колоночном шаблоне, создавая общую ширину 970рх, и основанием (базовой линии) в 24рх.
Полезным при создании сетки будет инструмент Grid System Generator, где Вы можете создать шаблон и украсть удобную графику с розовой колонкой, чтобы вставить его в Фотошоп!
Для создания основания (базовой линии) создайте в Фотошоп документ 24х24рх и нарисуйте однопиксельную линию через основание. Перейдите во вкладку Редактировать>Определить шаблон, а потом в своем основном документе заполните черным слой с этим шаблоном, чтобы дать шаблону базовой линии разместить Ваш текст и элементы страницы на нем.
Давайте начнем наш сноубординг в непростой (угловатой) местности!
Исправим творчески шаблон, готовый к изменениям, с помощью Фотошоп. Начнем с заполнения фона светло-голубым цветом (#b9d2f8), добавим градиент от темно-синего (#02357a) к среднему синему (#295ba6) и смешаем, чтобы получить вот такой цвет фона (#b9d2f8).
Зайдем на Bittbox и загрузим одну из удивительных текстур Noir Grunge. Вставьте текстуру в документ и уменьшите в размере. Кроме того, измените режим смешивания на Luminosity (Яркость) и уменьшите непрозрачность до 25%.
Давайте начнем наш сноубординг в непростой (угловатой) местности!
Исправим творчески шаблон, готовый к изменениям, с помощью Фотошоп. Начнем с заполнения фона светло-голубым цветом (#b9d2f8), добавим градиент от темно-синего (#02357a) к среднему синему (#295ba6) и смешаем, чтобы получить вот такой цвет фона (#b9d2f8).
Добавьте маску слоя к текстуре, а затем используйте большую мягкую кисть, чтобы смешать текстуру так, чтобы она простиралась от верхней центральной части документа. Черная краска на маске делает область невидимой, в то время как белая предоставляет видимые части.
С вымышленным брендом Снежная конфета, мы можем быстро соединить классный логотип, который вписывается в общий стиль к которому мы стремимся. Скачайте струящийся шрифт Black Rose и пишите в нижнем регистре. Не забудьте логотип масштабировать и позиционировать по отношению к столбцам и базовой линии.
"Огрубите" немного логотип, добавляя маску слоя и пройдитесь по нему шероховатыми кистями Фотошоп. Я использую кисти-штрихи, которые доступны для загрузки из Blog.SpoonGraphics. Установите непрозрачность кисти до 10%, затем постепенно наращивайте слои шероховатости.
С вымышленным брендом Снежная конфета, мы можем быстро соединить классный логотип, который вписывается в общий стиль к которому мы стремимся. Скачайте струящийся шрифт Black Rose и пишите в нижнем регистре. Не забудьте логотип масштабировать и позиционировать по отношению к столбцам и базовой линии.
Чтобы привлечь внимание к логотипу добавьте мягкую и тонкую падающую тень, затем нарисуйте белый радиальный градиент на новом слое. Установите стиль слоя Overlay (Перекрытие) и переместить в положение позади логотипа. Одновременно на этом месте смягчите эффект перекрытия, понижая непрозрачность до 50%.
Напишите простой список навигации справа от логотипа, следуя той же базовой линии. Используйте широко доступные шрифты как Helvetica или Arial, которые позволяют текст внести в HTML, когда кодировать по-настоящему.
Создайте визуальную подсказку, чтобы выделить активный пункт меню, добавив небольшой мазок кисти белым за текстом навигации. Уменьшите непрозрачность, чтобы сохранить белый текст четким.
Нарисуйте белую область контента, которая протянется на целые 970px.
Уменьшите непрозрачность области контента к 30 % и добавьте очень неуловимую падающую тень. Измените расстояние и уменьшите к 0рх, в то время, как установите ее размер к 10рх. Снизьте непрозрачность к 25 % для поддержания легкого эффекта затенения.
Одной из главных особенностей дизайна есть большой заголовок, который держит изображение катания на сноуборде. Эта область может быть использована в качестве слайд-шоу из вращающегося контента в конечном строении сайта, но на данный момент, мы просто создадим макет одного из элементов этого контента. Вставьте, вращайте и масштабируйте фотографию. Данное изображение можно найти на SXC.
Добавьте некоторые дизайнерские хитрости к изображению: несколько ярких цветных пятен. Выберите ярко-розовый, синий и желтый и нарисуйте их на слое над фотографией.
Установите на этом цветовом слое режим Overlay (Перекрытие) и установите непрозрачность до 35%. В результате получается тонкое изменение цвета, которое украшает фотографию.
Используйте диапазон кистей Фотошоп, чтобы сделать грубую границу вокруг изображения. Рисуйте кистью черного цвета, затем измените режим смешивания на Overlay (Перекрытие), чтобы цвета взаимодействовали.
Нарисуйте кистью штрихи на нескольких слоях, что тоже позволит каждому слою наложиться, создавая большую глубину и интерес так, как различные слои будут иметь различные уровни прозрачности.
Далее мы создадим креативный типографический макет для деталей о событиях. Я работал с текстом для простоты в программе Иллюстратор, но нет настоящих причин, чтобы выходить с Фотошоп. Используйте направляющие, чтобы помочь выравниванию всех слов.
Несколько изображений векторной графики можно взять с FreeVectors.net, что поможет добавить окончательные штрихи к стилизации информации о событии.
Далее мы создадим креативный типографический макет для деталей о событиях. Я работал с текстом для простоты в программе Иллюстратор, но нет настоящих причин, чтобы выходить с Фотошоп. Используйте направляющие, чтобы помочь выравниванию всех слов.
Вставьте текст в основной документ веб-дизайна и масштабируйте. Помещайте слова между колонками и идеально положите на базовую сетку.
Макет-очертание видео может быть создан с помощью другого изображения снойбординга. Добавьте шероховатую кромку, использую грубую кисть Фотошопа.
На новом слое нарисуйте круглую маску и заполните черным. Нарисуйте треугольник, используя инструмент "Полигональное лассо", чтобы символизировать иконку проигрывания, а потом удалите эту форму с круга. Снизьте непрозрачность, чтобы показать через нее контент.
Справа от видео будет короткий список предстоящих событий. Выпишите названия и подтвердите их иконкой. Увеличьте, чтобы регулировать мельчайшие детали иконки.
Изложите информацию о событие в заданном стиле. Используйте диапазон размеров шрифта, чтобы создать иерархию важности.
При изложении контента, особенно текста, не забудьте все размещать на сетке базовой линии. С нашей базовой линией 24px, используйте высоту строки 24px на всех пунктах. Завершите область контента с желаемым количеством элементов, и заканчивайте каждую ссылку с якорем, который связывает ту ссылку с более глубокими уровнями сайта.
Ниже этого контента мы выкладываем некоторые элементы, которые охватывают ширину обоих столбцов. Выложите некоторые портреты, чтобы создать раздел "Встречайте нашу команду". Добавьте небольшой белый штрих и тонкую падающую тень, чтобы создать видимость осязания фотографий.
Визуальная концепция завершена! Синяя цветовая схема помогает передать прохладу сноубордистской сцене, в то время как сочетание текстур и проблемных мазков кисти добавляет свое, что хорошо относится к культуре и образу жизни экстремальных видов спорта в целом.
Не забудьте подписаться, чтобы проверить следующий этап урока, где мы будем кодировать дизайна в HTML и CSS.
Источник: http://line25.com/tutorials/create-a-gnarly-snowboarding-themed-web-design
Вот мои результаты:
Комментариев нет:
Отправить комментарий