Реклама и Статистика


SEO sprint - Всё для максимальной раскрутки!





Акварельный дизайн блога

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

Акварельный дизайн блога

Первое, что необходимо сделать, это создать новый документ размером 1024×1100. Далее необходимо добавить фон. Я использовала изображение, найденное на deviantart here. Это изображение не достаточно большое, но я растянула его во весь документ. Теперь создадим логотип. С помощью шрифта Helvetica цветом #000000 я написала «Vicinity» с настройкой bold, а цветом #D75160 я написала «Designs» с настройкой Regular. У вас получиться следующее.

Теперь добавим небольшую линию под логотип. С помощью Rectangle Marquee tool сделайте выделение как на рисунке и залейте его цветом #FFFFFF.

Уменьшите opacity до 90%, чтобы лучше сочеталось с фоном. Затем добавьте текст в созданную ячейку цветом #64685E.

Теперь добавим поле для твоего логина и клиентов. На правой стороне шаблона снова с помощью Rectangle Marquee Tool сделайте выделение как на рисунке и залейте его цветом #000000.

Уменьшите opacity до 30%, а затем добавьте текст как на рисунке цветом #FFFFFF.

Далее создадим навигацию. Снова с помощью Rectangle Marquee Tool сделайте выделение как на рисунке и залейте его цветом #000000.

Уменьшите opacity до 70% для получения красивого прозрачного поля на цветном фоне.

Теперь покажем, как будут располагаться ссылки. Для каждой ссылки мы добавим описание, чтобы она была забавная и дружелюбная. С помощью Rectangle Marquee Tool сделайте выделение как на рисунке и залейте его цветом #303130.

Измените blending mode квадрата на Soft Light и затем вы можете добавить текст. Для ссылки я использовала цвет #FFFFFF, а для описания цвет #FFFFFF, но уменьшила opacity до 50%.

Повторите эти действия для создания всех навигационных ссылок. Для активной ссылки я использовала цвет #3CC1F9 вместо белого.

На свободное место в конце вы можете добавить опции для пользователей для описания RSS Feed. Добавьте только простой белый текст и RSS иконки и у вас получиться следующее.

Далее создадим контекстную область. С помощью Rectangle Tool сделайте выделение как на рисунке и залейте его цветом #FFFFFF.

Сначала добавьте заголовок для области блога. Я выбрала слова «Latest Articles» цвета #000000 с настройкой bold. Затем я использовала цвет #3B3A3A для «- - - - - - - - - - - -» под заголовком. У вас получиться следующее.

Теперь создадим панель поиска. Снова с помощью Rectangle Marquee tool сделайте выделение как на рисунке и залейте его цветом #000000.

Примените следующие стили слоя, дважды щелкнув по слою.

У вас получиться следующее.

Теперь необходимо сделать кнопку поиска. Поэтому с помощью Rectangle Marquee tool сделайте выделение как на рисунке и залейте его цветом #000000.

Примените следующие стили слоя.

Теперь добавьте текст белого цвета сверху кнопки и у вас получиться следующее. (обратите внимание, я добавила небольшую белую границу вокруг углов, но это необязательно)

Добавьте текст сбоку от области поиска и ваш документ будет выглядеть так.

Начнем создавать боковую панель. Идея состоит в том, чтобы сделать ее простой. Необходимо сделать ячейку для заголовка «Recent Posts», поэтому с помощью Rectangle Marquee Tool сделайте выделение как на рисунке и залейте его цветом #D65863.

Теперь возьмите Text Tool и напишите «Recent Posts» цветом #FFFFFF.

Далее с помощью Polygonal Lasso Tool сделайте маленькое треугольное выделение и залейте его цветом #000000. затем добавьте текст названия поста. Для ссылки я использовала цвет #2E92BC.

Теперь повторите эти действия и создайте еще несколько ссылок. У вас получиться следующее.

Последнее, что необходимо сделать, это добавить верхнюю границу в 2 пикселя снизу. Сделайте это с помощью Rectangle Marquee tool и залейте ее цветом #000000. Уменьшите opacity слоя приблизительно до 10% и получите следующее.

Повторите действия для создания раздела Recent Comments, но измените цвет фона заголовка на #B7D8CF. Ваш документ будет выглядеть так.

Теперь пришло время сделать пост лист. Снова с помощью Rectangle Marquee Tool сделайте выделение как на рисунке и залейте его цветом #F1F1F1.

Далее необходимо сделать красивую область закругленными краями, 3где будут располагаться иконки каждого поста. Поэтому с помощью Rounded Rectangle Tool с радиусом 10 px нарисуйте прямоугольник с закругленными краями как на рисунке (не важно, какого цвета, так как мы его позже изменим).

Теперь примените к прямоугольнику следующие стили слоя.

Я добавила иконку с одного сайта для примера и получила следующее.

Теперь все, что осталось, это с помощью text tool расположить какую-нибудь информацию как на рисунке. Иконку календарь я использовала из набора at this link.

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

Осталось только создать нижнюю панель. С помощью Rectangle Marquee Tool сделайте выделение как на рисунке и залейте его цветом #000000.

Теперь уменьшите opacity слоя приблизительно до 70%, а затем добавьте текст как на рисунке.

Вот и все! Когда вы все сделаете, ваш шаблон будет выглядеть так.

Акварельный дизайн блога


Просмотров: 5658

  Коментарии (1)
 1 Написал(а) Такт, в 18:47 28.11.2010
Очень интересно и поучительно спасибо, очень сильно понравилась статья, главное автор знает о чем он пишет так что читать очень сильно понравилось еще раз благодарю и удачи в ваших проектах.

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Реклама