Рубрика: Photoshop Уроки | Урок прочитали: 725
 (голосов: 0)

Тёмный дизайн для web сайта

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

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

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

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

Что ещё может привлечь внимание? Это заголовки и название статей. Они также дают мгновенную информацию о содержимом сайта.

Финальное изображение

Шаг 1. Теперь, когда мы знаем то, что мы собираемся делать и проектные решения позади, переходит к процессу создания задуманного.

Чтобы начать, создайте новый документ. Размер 1024px шириной и 1200px высотой. Хотя основное содержание будет находиться в центре, шириной 800px, этот размер документа покажет, как это будет выглядеть проект на широкоэкранных мониторах.
Затем, заполните наш фон черным цветом.

Шаг 2. Давайте добавим обводку и градиент к фону, чтобы придать эффект глубины. Выберите Инструмент Область (Прямоугольная строка) - (Single Row Marquee Tool) и выделите область в 400px ниже вершины документа. Заполните выделение цветом (#1b1b1b). Теперь добавим градиент под созданной строкой.

Выберите цвет переднего плана (#0d0d0d).
Затем сделайте выделение 1024px шириной и 20px высотой. Выберите Инструмент Градиент (линейный). Примените градиент от цвета переднего плана к прозрачному.
Начните создавать градиент сверху выделения и закончите внизу.

Шаг 3. Приступим к созданию хедера проекта. Теперь, после того как мы наметили место для нашего хедера, будем придавать ему дизайн.  

Сделайте выделение 800px шириной и 225px высотой. Заполните выделение черным. Сделайте обводку в 1px, с внутренней части цветом (#0a0a0a). Удостоверьтесь, что включена Линейка (Ctrl+R). Установите направляющую на 512px, ориентируясь на горизонтальную линейку.
Эта направляющая будет определять центр нашего хедера. Теперь перетащите хедер таким образом, чтобы его центр совпал с направляющей.
Это выровняет Ваш заголовок.

Давайте добавим внешнее свечение нашему заголовку. Стиль слоя>Внешнее свечение: Режим - Нормальный, Цвет - черный, Opacity-50 %, Размах-0 %, и Размер-29px. Вы не заметите этого эффекта сейчас, но позже когда мы добавим графику позади заголовка, Вы увидите отбрасывание тени на неё.

Шаг 4. У нас не будет "плавающего" хедера, поэтому переходим к дальнейшим действиям - к главной части. Сделайте выделение 800px шириной, а остальная часть - высота хедера. Заполните выделение чёрным и добавьте внутреннюю обводку цвета (#0a0a0a), Стиль слоя>Обводка. Переместите выделение на 1px так, чтобы оно наложилось на заголовок.

Убедитесь, что слой с центральной частью выше слоя с хедером, так как мы не хотим, чтобы хедер отбрасывал тень на центральную часть. Добавим полосу в 10px заполненную градиентом от (#0a0a0a) до прозрачного с применением Стиля слоя>Обводка.

Прежде, чем мы продолжим, удостоверимся, что сгруппировали слои. Поместите слои с хедером и центральной частью в группу "Главная". Все остальные слои поместите в группу ниже уровнем и назовите её "Фон".

Шаг 5. Создадим новую группу по имени "BehindHeader". Поместите её между "Главная" и "Фон". Создайте новый слой в этой группе. Выберите Инструмент Прямолинейное Лассо .

Выделите треугольные области, выходящие из заголовка, и заполните их цветом (#151515). Это действие создаст лучи света. Этим приёмом мы попытаемся  сфокусировать внимание посетителя на хедере. Лучи должны располагаться позади хедера. Чтобы было легче и быстрее, нарисуйте лучи для одной стороны, а затем дублируйте слой с лучами и отразите его по горизонтали Редактирование>Трансформирование>Отразить по горизонтали.

Создадим Радиальный Градиент из центра луча к внешней стороне. Сделайте его так, чтобы градиент переходил в фон. Выберите цвет переднего плана белый, а второстепенный цвет чёрный.

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

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

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

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

Шаг 8. Теперь, когда область позади нашего хедера доработана, то начнём работу непосредственно над хедером. Создайте новую группу выше слоя с главной частью и назовите его InsideHeader. Теперь, когда у нас есть наша группа, дублируем проект, т.е всё то, что мы сделали ранее в верхних левых, и верхних правых углах хедера.

Поместите графику в новую группу. Проблема теперь состоит в том, что слой все еще отображает внешние стороны хедера, и блокирует наш эффект тени. Что мы сделаем, Ctrl-click по миниатюре слоя с хедером. Это действие выделит то, что нам нужно. Теперь все, что мы должны сделать, это добавить маску слоя (Add Layer Mask) к нашей группе InsideHeader. Изменяем Прозрачность (Opacity) группы BehindHeader на 90 %.

Шаг 9. Разместите текст над хедером и в самом хедере. Создайте эмблему или графический объект и поместите его слева так, чтобы это привлекло внимание к главной области. Вы можете также добавить градиент от цвета переднего плана к прозрачному. Я использовал (#030a0e). Если Вы добавляете градиент, убедитесь, что создали тень, которая должна быть более яркой, чем градиент. Для этого я использовал цвет (#0b1316). Это добавит переход между заголовком и навигацией.

Шаг 10. Выделите слой с заголовком. Создайте новый Стиль слоя. Примените параметры, показанные ниже. Для Перекрытия Узора я использовал узор геральдической лилии, (найти можно в сети). Создайте маску слоя, кликнув на кнопке Добавить Слой-маску в палитре слоев. Убедитесь, что применили маску к выбранному слою. Примените радиальный градиент, который идет от белого к черному. Эффект показан на изображении ниже.

Шаг 11. Для навигации делаем новую группу под названием Навигация. Создайте выделение высотой 35px черного цвета под главной частью нашего хедера. Добавим градиент с цветом переднего плана (#0c0c0c) и до прозрачного (сверху вниз). Выглядит неплохо, но если мы добавим обводку в 1px цветом (#232323) в основании, то  сделаем переход между баннером и основной частью.

Добавьте текст ссылок. Я использовал шрифт Verdana 18pt, жирный.

Шаг 12. Теперь создайте новую группу под названием "Данные". Создайте новую область размером 100px шириной и 100px высотой. Создайте новый слой выше. Выберите Инструмент Прямоугольник со скругленными углами . Установите Радиус в 5px. Нарисуйте прямоугольник размером 50px на 50px. Добавьте внешнее свечение -  Режим: Нормальный, Цвет: от чёрного.

Вы можете также использовать лучи света, которые создали ранее, и разместить их меньшую копию позади Вашего прямоугольника. Добавьте текст в прямоугольник. Я использовал шрифт 12px Verdana и 24px bolded Verdana.

Добавьте название и содержание.. Я использовал шрифт 30px Verdana белого цвета для заголовка, и 12px Verdana (#dddddd) текста контента. Ссылки будут иметь цвет (#36ade1).

Шаг 13. Чтобы создать sidebar (боковую панель) используйте Инструмент Прямоугольник со скругленными углами , Радиус 10, добавляем обводку цветом (#080808) и добавляем два Градиента, от цвета переднего плана к прозрачному. Поместите один на вершине и один в основании sidebar-а.

Шаг 14. Наконец, последний шаг, после выполнения которого, мы получим нижний блок ссылок. Вы можете создать это той же самой техникой, используемой для главной части хедера.
Создайте маску слоя на группе так, чтобы она была размером 800px на 300px. Размесите  изображение в верхнем левом углу блока. Создайте маленькие прямоугольники со стрелками, чтобы использовать их перед текстом ссылки, как показано на изображении ниже. Между каждой ссылкой есть также разделительная линия. Что бы хоть как-то отделить область ссылок от основной части, примените линейный градиент от цвета переднего плана к прозрачному.

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

Автор: Tyler Bramer.
Переводчик: Лукша Юрий
Ссылка на источник

           

Похожие файлы и публикации:

Тёмный дизайн для web сайта
Финальное изображение
Тёмный дизайн для web сайта
В этом уроке мы будем создавать стильную черную навигацию для сайта. Вот так она будет выглядеть в конце урока:
Тёмный дизайн для web сайта
Изображение - существенный элемент в наборе любого дизайнера. Независимо от того - простой Ваш проект или что-то эксклюзивное, хорошее изображение будет всегда кстати. В этом уроке продемонстрированы способы того, чтобы помочь Вам создать своё собственное глянцевое изображение.
Тёмный дизайн для web сайта
В этом уроке я покажу вам процесс, который я использовал для разработки этого действительно классного, абстрактного стиля заголовка для сайта.
Тёмный дизайн для web сайта
Поскольку Web 2.0 завоевал интернет, нижняя часть страницы, так называемый Footer, стала более важной, чем прежде.  В этом уроке показывается, как сделать стильный Footer (Футер - дублирование основного меню внизу сайта, как правило, с указанием координат изготовителя и Copyright’а.)  для сайта в Photoshop.
Тёмный дизайн для web сайта
Текстурированные элементы в современном веб-дизайне сейчас модная тенденция. Узнайте, как создать собственную текстуру, а затем применить ее к своему лэйблу.
Тёмный дизайн для web сайта
Совместно с Sohan Negi мы разработали урок, который в подробностях покажет вам, как создать иконку пары динамиков. Урок получился длинным, поэтому мы его разбили на две части.
Тёмный дизайн для web сайта
В этом Photoshop уроке мы будем учиться создавать баннер с простым, но эффектным дизайном.
Тёмный дизайн для web сайта
Шаг 1. Создайте новый документ (Ctrl+ N) размером 1100px на 1150px. Создайте новый слой назовите его "Фон", заполните документ цветом #be0000.
Тёмный дизайн для web сайта
На изображении представлен финальный результат:
Тёмный дизайн для web сайта
Стиль "акварель" в области графического дизайна в последнее время стал модным. Веб-сайты и дизайнеры достаточно часто используют этот стиль.
Тёмный дизайн для web сайта
В этом уроке Вы научитесь создавать оригинальные веб - кнопки для сайта.
Тёмный дизайн для web сайта
В данном уроке мы будем учиться создавать «цветовую» шапку для сайта.
Тёмный дизайн для web сайта
В данном уроке показано, как создать веб-навигацию по меню с новостной панелью при помощи программы Adobe Photoshop. На данный урок меня вдохновила навигация данного сайта.  После выполнения данного урока, у Вас должно получиться что-то похожее. 
Тёмный дизайн для web сайта
Шаг 1. Давайте начнем с открытия нового документа (размер 540 × 540 пикселей при 72ppi).
Тёмный дизайн для web сайта
Шаг 1. Создайте новый документ, размером 600px на 800px. Заполните его темно-синим цветом (#091417).
Тёмный дизайн для web сайта
Введение Я хотел написать этот урок, поскольку, большинство моих обучающих программ нацелено к промежуточным или продвинутым пользователям Фотошопа, тогда как этот – предназначен для новичков.
Тёмный дизайн для web сайта
В этом уроке вы узнаете, как создать стильные удивительно красивые алмазы и научитесь создавать обои из них.