Реклама на сайте

вход на сайт

Имя пользователя :
Пароль :

Восстановление пароля Регистрация
Создаем макет для фан сайта
Создаем макет для фан сайта


Начало…

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

Добавляем текстуру для фона

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

Создаем макет для фан сайта


Теперь нам нужно некоторым местам фона добавить деталей. Во-первых, добавим кистей гранж стиля. Вы можете их найти здесь. Теперь после того, как Вы установили кисти, на новом слое кликаем несколько раз. Меняем режим наложения для слоя с кистями на 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, но я точно не помню бесплатный ли он, Вы можете найти любой каллиграфический шрифт. Пишем наш навигационный текст (News, Tours, Discography, Biography, Gallery,), применяем следующие стили слоя к слоям из текстом:

Drop Shadow (Тень)

Создаем макет для фан сайта


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

Создаем макет для фан сайта


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

Создаем макет для фан сайта


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

Добавим линиям такой же стиль как и тексту.

Создаем макет для фан сайта


Добавление контента

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

Создаем макет для фан сайта


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

Создаем макет для фан сайта


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

Создаем макет для фан сайта


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

Создаем макет для фан сайта


Финиш! Мои поздравления

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

Создаем макет для фан сайта


Создаем макет для фан сайта


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

Теги:
 (голосов: 0)
Новость опубликована 3-02-2011, 14:35, её прочитали 525 раз(а).
Понравилась тема? Посмотрите эти:
Комментарий #2 написал: baksizhtes (19 мая 2012 05:18)
Публикаций: 0, комментариев: 22, группа: Посетители
Фото
Комментарий #3 написал: karguferti (3 сентября 2012 02:56)
Публикаций: 0, комментариев: 14, группа: Посетители
Фото
Написать комментарий
Ваше Имя:


Ваш E-Mail:



Код:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Введите код: