Дополнения

Бесплатная рассылка

Вы будете получать ссылки на свежие видеоуроки по фотошопу совершенно бесплатно

крупнейшая в мире социальная сеть пользователей Adobe Photoshop

208 686 чел. 399 983 работы 4 093 урока
  • Обучайтесь и совершенствуйтесь
  • Разместите своё портфолио
  • Участвуйте в конкурсах
  • Подписывайтесь и оценивайте
  • Комментируйте и общайтесь
Присоединиться

Сложность: Средняя

Тёмный дизайн для 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.

Комментарии 45

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты

местами перевод конечно подкачал, но разобраться можно) спасибо
красивый шаблон получился :)

Урок Супер!!!
только как-то мутно описано поэтому делел по своему

Вот моя работа...Спасибо за урок

Перевод совсем плох. Надо бы исправить,а то разобраться невозможно. Спасибо за внимание!

довольно сложный урок, с черным цветом вообще тяжело работать.

Спасибо за идею! Для новичков очень тяжело,нет более подробных объяснений((((((

Спасибо за очень интересный урок..)

Вот ещё один Background для Twitter

Фантазии много не хватило так что сори ! ))))

Спасибо за урок, правда сделал по своему)) Background для Twitter, оригинал работы выглядит намного качественнее.

непростой урок, но справились!

Спасибо! Администрации сайта за кнопочку \"Наверх\"! Очень удобно стало! :)
Но перевод действительно очень корявый.....еслиб не умела рисовать нормально дизайны сайтов, то не смоглаб попрусту говоря(

Перевод вообще корявый, никакой конкретности

Сделайте выделение 800px шириной, а остальная часть - высота хедера- подскажите пжл какая высота? заранее благодарю!

Зачем комментарий удалили? Что не понравилось??

акак это все перевести в ШТМЛ или РНР?

попыталась выполнить урок ничерта не получилась как ни ковырялась... очень расстроилась так-как идея классная. еще обидно что моник другие цвета выдает(((

Перевод корявый)
Делаю щяс) Тяжеловато)

Дизайн красивый, но делать не возьмусь. Не знаю к чему его приминить можно..

ооо...давно хотела научиться)

Кароч как собрать профессиональный веб сайт подскажите пожалуйста ...

Интересно) красочно, гармонично, не режет глаза

Отпадный урок, но влом делать((((

Сделайте выделение 800px шириной, а остальная часть - высота хедера
а вот в оригинале пишет так:
Make a selection 800px wide and the rest of the height under the header
разницу видите?
я два дня сижу, и не могу ни чего сделать, потому шо перевод никакой...

Еще 15
Добавить комментарий / работу

Новые работы пользователей

{{work.views}}

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска, или сбросить фильтры


Смотреть все работы

Наверх

Авторизация

Забыли?

Регистрация

Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
18+
Работа имеет содержимое для 18+ лет
Мне нравится {{work.likes}} {{work.views}} Жалоба

Оставить комментарий {{work.childs.length || 0}}

(до 5 шт)
jpg, png, gif, общий вес файлов не более 7Мб, не менее 450px по ширине и высоте, jpg или анимированный gif
Ссылки внутри комментариев могут вести только на эти сайты
Войти Авторизуйтесь, чтобы комментировать работы, ставить лайки и просто быть участником нашего дружного сообщества!
Сначала популярные Сначала старые Сначала новые
Добавить комментарий
Разбор работы по просьбе автора:
Популярные работы автора:
Курсы и уроки автора:
Онлайн-курс {{work.relless.type}}

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:


Название:
{{name}}
Описание:

{{text}}

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

Исходник — это файл из исходных изображений, которые использовались для создания вашей работы. Исходник позовляет лучше понять вашу работу. Он не обязателен, но работы с исходниками получают больше лайков и имеют право на участие в еженедельных конкурсах.
jpg-файл, максимальный размер 1920x1080px

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Вашу работу разберет один из экспертов проекта «Фотошоп-мастер». Это позволит вам увидеть свои ошибки и сделать следующую работу лучше. Разбор будет сделан в комментариях к работе и будет виден всем пользователям.

Пункт «18+» допустимо ставить только для работ, действительно содержащих элементы, которые не должны видеть несовершеннолетние: обнаженка, сцены жестокости, и т.д. Запрещается ставить такую метку на обычные работы. За подобное поведение у пользователя будет блокироваться возможность добавления новых работ. Все понятно, больше не показывать

После добавления работы:


Запланировать публикацию

Запланировать

Правила загрузки работ на «Фотошоп-Мастер»

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

  • 2. Сайт photoshop-master.ru приветствует соблюдение авторских прав. В случае возникновения споров или разногласий Администрация сайта приложит все усилия для разрешения сложившейся ситуации.

  • 3. Правило третье. Публикуемые работы не должны содержать изображения, связанные с наркотиками , порнографического содержания, сцены насилия.

Подробная информация о правилах публикации https://photoshop-master.ru/blog/post/rules