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

Создаём шаблон web-сайта в Фотошоп

Начало…
Создадим новый документ. Для этого урока я использовал маленький размер  760 x 760 пикселей, Вы можете сделать его больше.  Теперь зальём фон тёмным цветом, Я использовал  серо-коричневый. (#47433a).

Добавляем текстуру для фона.
Текстуру фону можно добавить несколькими способами. Можно использовать фильтры или наложить поверх фото и поменять  режим наложения слоя. Я добавил фильтр Noise (Шум) Filter > Noise >Add Noise (Фильтр >Шум >Добавить шум) с такими настройками:

Теперь нам нужно некоторым местам фона  добавить деталей. Во-первых, добавим кистей гранж стиля. Вы можете их найти здесь или на сайте Photoshop-master. Теперь после того, как Вы установили кисти, на новом слое кликаем несколько раз. Меняем режим наложения для слоя с кистями на  Soft Light (Мягкий свет) или Overlay (Перекрытие) и можно снизить прозрачность (20 – 50 %). Начинаем полупрозрачными, малозаметными кистями:

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

Красим в разных местах фона:

Помните, используйте кисти с маленькой непрозрачностью или поменяйте  режем наложения слоя на  Overlay (Перекрытие) или  Soft Light (Мягкий свет), чтобы получить хороший  эффект смешения.

На этом этапе фон выглядит где то так:

Доделаем фон – Добавляем несколько деталей.
Теперь к фону я добавил кисть штампа (его можно сделать самому или скачать):

Слою со штампом ставим непрозрачность 30% или режим наложения  Soft Light (Мягкий свет)

Сливаем все слои в один Layer > Flatten Image (Слой > Выполнить сведение). После применяем фильтр Эффект освещения Filter > Render > Lighting Effects (Фильтр > Рендеринг  > Эффект освещения).

И теперь мы должны получить фон вроде этого:

Секция для контента.
 Каждому сайту нужна секция для контента, сделаем нашу. Сделаем прямоугольное выделение в центре документа. Заливаем его цветом немного светлее фона. Цвет, который использовал я, #716a5d. Я понизил заливку для  слоя с секцией для контента до 40% и добавил такие стили слоя:

Outer Glow (Внешнее свечение)

Inner Glow (Внутреннее свечение)

У нас получится что-то вроде этого:

Добавляем маску слоя для нашего слоя с секцией для контента: Layer > Layer Mask > Reveal All (Слой >Слой-маска>Показать все) и используйте гранж кисти чёрного цвета. Это удалит части нашего слоя, но не пользуйтесь ластиком, так как вы не сможете отредактировать или изменить сделанное.

Делаем текстовый логотип
Придадим нашему сайту жизни, добавим ему текст. Начнём с добавления главного лого, текст: «Название группы»  вверху слева. Я использовал шрифт  4990810, и размер букв 48pt. Это бесплатный шрифт, его можно скачать здесь: скачать. Для текста применяем цвет #c9c4b8. И добавим слою два эффекта:

Drop Shadow (Тень)

Gradient Overlay ( Наложение градиента)

И теперь мы имеем такое:

Неплохо выглядит, не так ли?
Сейчас вы можете добавить ненужный, но вероятный текст авторского права под областью с контентом. Я использовал шрифт Tahoma, 11pt#5c584e. Ещё сюда подойдёт Arial.

Что ещё нужно для сайта? Навигация конечно! 
Время добавить навигационный текст или кнопки.
Шрифт, который использовал я называется Cornet, но я точно не помню бесплатный ли он, Вы можете найти любой каллиграфический шрифт на Photoshop-master. Пишем наш навигационный  текст (News, Tours, Discography, Biography, Gallery,), применяем следуйщие стили слоя к слоям из текстом:

Drop Shadow (Тень)

Gradient Overlay (Hаложение градиента)

Для каждого текстового слоя можно поменять немножко заливку

И наконец я добавил линии под каждый навигационный рядок, используя  line tool (Инструмент линия).
Примечание переводчика: этот инструмент находится в том же окошке где и инструмент Фигуры.
Добавим линиям такой же стиль как и тексту.

Добавление контента
Мы хорошо поработали, и у нас получилось где то так.

Итак, давайте добавим немного контента. Находим пару фото и добавляем к «нам», меняем их размер и размещаем на месте, предназначенном для контента.

Я уменьшил  мои картинки до 140 x 100 пикселей, и добавил по две рамочки, 4 пикселя внутри (светлая) и 2 пикселя на внешней стороне (тёмная). И напоследок я добавил некий текст справа от картинок. Я использовал шрифт Tahoma11pt/12pt, и светлые/тёмные коричневые цвета.

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

Финиш! Мои поздравления.
Итак мы закончили. Ну и на завершение можно добавить некоторые фото вверху слева, поменять им режим наложения и снизить прозрачность, поработать ластиком.

Огромное спасибо за чтения урока парни (и девушки конечно), я надеюсь Вам понравился этот урок. Посмотреть результат урока в реальном размере можно здесь

Перевод: Александр Будулатий
Ссылка на источник

           

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

Создаём шаблон web-сайта в Фотошоп
Хорошо, начнем с создания нового документа в Photoshop. Я создал новый документ размером 800 × 400 пикселей. Затем выберите подходящие цвета, например, # 161515, # 71777b и залейте документ линейным градиентом.
Создаём шаблон web-сайта в Фотошоп
В этом уроке я расскажу вам, как создать потрясающий текстовый эффект с использованием специальных кистей и карты градиента.
Создаём шаблон web-сайта в Фотошоп
В этом уроке мы будем рисовать обои с волком, воющем на луну. В ходе работы мы будем использовать множество режимов наложения, света и тени, технику выделения, инструмент перо и различные кисти.
Создаём шаблон web-сайта в Фотошоп
Этот урок о том, как сделать акцент на определённой детали фотографии.  Надеюсь, он будет Вам полезен.
Создаём шаблон web-сайта в Фотошоп
В этом уроке я собираюсь рассказать вам, как сделать элегантный текст. Итог урока:
Создаём шаблон web-сайта в Фотошоп
Шаг 1. Давайте начнем, создайте новый файл. Я использовал размер 600×500  пикселей в 72 пикс/дюйм, и я залил черным цветом. Теперь создайте новый слой и назовите это ‘‘Темный текст’’. После выберите инструмент Horizontal Type Tool (Горизонтальный текст), устанавливаете шрифт Arial, размер - 150 pt, цвет - черный.
Создаём шаблон web-сайта в Фотошоп
В этом уроке вы узнаете, как создать кровавый текстовый эффект в Фотошоп. Мы будем использовать кисти, смешивания слоев, эффекты облаков и цветовую коррекцию. Урок очень простой и подойдет для начинающих фотошоп-мастеров. Вот так выглядит финальный результат:
Создаём шаблон web-сайта в Фотошоп
 В этом уроке, мы будем создавать блестящий Солнечный эффект текста, используя стили слоя и размытие фильтров. Это простой урок, но результат удивительный.
Создаём шаблон web-сайта в Фотошоп
В этом уроке Вы научитесь создавать эффект волшебного освещения. В конце урока у Вас получится вот такая работа.
Создаём шаблон web-сайта в Фотошоп
В этом Photoshop уроке мы будем учиться создавать баннер с простым, но эффектным дизайном.
Создаём шаблон web-сайта в Фотошоп
В этом уроке я покажу процесс создания действительно интересных обоев с рисунком геометрической формы в Фотошопе. Это достаточно простой урок, однако эффект выглядит впечатляюще!
Создаём шаблон web-сайта в Фотошоп
На прошлой неделе я смотрел фильм «Война богов» (Immortals), а перед этим я ходил в кинотеатр посмотреть постеры. Я видел постер к этому фильму, а также постеры к старым фильмам Гарри Поттера, и у всех них присутствует похожий металлический текстовый эффект. Исходя из этого я решил воссоздать средневековый металлический текстовый эффект в Photoshop.
Создаём шаблон web-сайта в Фотошоп
Мы собираемся создавать "пивной текст"!  Экспериментируйте со стилями слоя, чтобы получить более точный результат!
Создаём шаблон web-сайта в Фотошоп
Шаг 1. Открываем фото, с которым будем работать. Дублируем этот слой (на всякий случай, чтобы всегда можно было вернуться). Выбираем инструмент Burn Tool (Затемнение), ставим midtones (средние тона) и непрозрачность 20-40%. Проводим им по краю и в центре зрачка.
Создаём шаблон web-сайта в Фотошоп
В этом уроке вы узнаете, как совместить различные стили слоя и использовать фильтры, чтобы создать несложный призрачный эффект для текста.
Создаём шаблон web-сайта в Фотошоп
Ожидаемый результат: