Суббота, 2024-04-27, 11:31 PM
Приветствую Вас Гость | RSS

Design for You!

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: Serious  
Форум » Курсы графики от DIZ4U.info » Уроки фотошоп для всех » Профессиональный шаблон для блога (учимся делать простенькие шаблоны)
Профессиональный шаблон для блога
SeriousДата: Пятница, 2008-06-13, 4:32 PM | Сообщение # 1 |
Анаграфист
Группа: D4U Team
Сообщений: 188
Репутация: 13
Статус: Offline
Шаг №1

Начнем с создания нового файла. Я использовал размер в 1024x950px. Задний фон делаем черным. Теперь вставляем в новый слой "деревянный" фон. Берем здесь. Растяните его на весь холст.

Шаг №2

Выбираем Horizontal Type Tool и шрифт Britannic Bold (скачать здесь), regular, 36pt, strong и белый цвет. Пишем все на новом слое. Часть текста можно приукрасить цветом #59DEFF.

Шаг №3

Создаем белый округлый прямоугольник и растягиваем по шаблону, но не полностью, а оставляем свободное пространство (смотрим скрин чуть ниже). Идем в Стили (Layes->Layer Style) и выбираем Stroke (Почему то нет параметров. Думаю, что 2px и черного цвета хватит smile )

Шаг №4

Теперь создадим левое навигационное меню. Сначало создаем новый слой и именуем "About". В этом слое создаем прямоугольную панель черного цвета, размеров 268x29px и ставим её в верхней левой части белого округленного прямоугольника.

Шаг №5

Идем в Стили (Layer->Layer Style) и добавляем Drop Shadow, Inner Shadow и Gradient Overlay для нашего меню.



Шаг №6

Выбираем Horizontal Type Tool и шрифт Arial, bold, 13 pt, none и белого цвета. Теперь пишем "About" на нашей панельке.

Шаг №7

На новом слое создаем прямоугольник серого цвета, размерами 268x116px и помещаем его под панелью "About". Идем в Стили (Layer->Layer Style) и добавляем Gradient Overlay.


Шаг №8

Сейчас добавим контента в нашу секцию "About".

Шаг №9

Добавим еще несколько секций, используя "about". В блог я добавил секции "Categories" и "Last Content" (у меня чутка неровно вышло smile )

Шаг №10

Новый слой назовем "Center Content". Добавим новую секцию в наш дизайн, в центральную часть, её параметры где-то 552x180px (автор не указывал, смотрим скрин).

Шаг №11

К этой секции нам нужно добавить побольше деталей. Создаем на новом слое черную панельку 552x24px. Идем в стили (Layer-Layer Style) и добавляем Gradient Overlay.


Шаг №12

Теперь добавим текстовых деталей: имя автора, дату, категорию или то, что вы захотите. Используем шрифт Arial, regular, 11pt, none, белый цвет, но ссылки делаем #59DEFF цвета.

Шаг №13

Добавим еще контента в центральную секцию.

Шаг №14

В правую часть центральной части добавим баннер.

Шаг №15

Сейчас добавим навигационную панель выше белой части. Сначало выберем Rounded Restangle Tool и в опциях поставим Fill Pixels, радиус 10px и включим anti-aliased. Новый слой опускаем ниже слоя с белой частью.

Шаг №16

Идем в стили (Layer->Layer Style)и добавляем Gradient Overlay.

Шаг №17

Выбираем Horizontal Type Tool и параметры шрифта: Arial, bold, 11 pt, strong и белого цвета. В новом слое пишем "Subcribe to RSS Feed". Идем в Стили (Layer->LayerStyle) и добавляем Stroke. Текст помещаем на синию панельку.

Шаг №18

Таким же образом создаем еще меню возле RSS, но используем #767676 цвет (опять автор не указал размеры, думаю 480x28px вполне хватит).

Шаг №19

Возвращаемся к главному белому слою. Выбираем Eraser Tool, Brush (можно взять кисть Airbrush Soft Round 65 или другую на свой вкус, но по моему этой удобней). Ставим Flow 60% и аккуратно подрезаем нижний левый угол.

Шаг №20

Сейчас создадим небольшую сноску, добавим новый слой с именем "Footer Design". В нем создадим белый круг, используя Ellipse Tool.

Идем в стили (Layer->Layer Style) и добавляем Gradient Overlay и Stroke для слоя с белым кругом. Режим слоя ставим Darken.


Шаг №21

Теперь создами маленький круг, внутри уже имеющегося, цветом #59DEFF. В стилях слоя (Layer->Layer Style) добавим Satin, Gradient Overlay и Stroke. Режим слоя ставим Soft Light.




Шаг №22

Финиш. Теперь вы можете добавить навигационное меню, некоторые детали, копирайт и все остальное. Слегка подравнять, в общем, довести до идеала smile

То, что получилось у меня

Авторская работа

Источник: tutorialized.com
Перевод: Serious
p.s. автор часто не указывает размеры - готовьтесь smile Для удобного расположения элементов можно включить View -> Show -> Target Path/Smart Guides

 
kydapodatsyaДата: Вторник, 2008-06-17, 4:17 PM | Сообщение # 2 |
Дизайнер
Группа: Администраторы
Сообщений: 2641
Репутация: 226
Статус: Offline
хороший урок wink
 
INCVIZITORДата: Пятница, 2008-09-12, 10:50 PM | Сообщение # 3 |
Спектографист
Группа: Студенты - 1 курс
Сообщений: 19
Репутация: 0
Статус: Offline
уау smile
 
Bad_BoyДата: Пятница, 2008-12-26, 1:31 PM | Сообщение # 4 |
Неографист
Группа: Студенты - 1 курс
Сообщений: 51
Репутация: 1
Статус: Offline
Serious, kydapodatsya, У меня вопрос....Как подложить картинку с RSS под белый фон? Не в Фотошопе! Я уже верстаю.......


 
kydapodatsyaДата: Пятница, 2008-12-26, 2:12 PM | Сообщение # 5 |
Дизайнер
Группа: Администраторы
Сообщений: 2641
Репутация: 226
Статус: Offline
Quote (Bad_Boy)
Как подложить картинку с RSS под белый фон? Не в Фотошопе! Я уже верстаю.......

бекграундом
 
Bad_BoyДата: Пятница, 2008-12-26, 4:44 PM | Сообщение # 6 |
Неографист
Группа: Студенты - 1 курс
Сообщений: 51
Репутация: 1
Статус: Offline
Вот то что получилось у меня....У меня сложилось впячатление что я болею гигантизмом) скажите что это не так!)
kydapodatsya, СПС


 
kydapodatsyaДата: Понедельник, 2008-12-29, 11:54 AM | Сообщение # 7 |
Дизайнер
Группа: Администраторы
Сообщений: 2641
Репутация: 226
Статус: Offline
Bad_Boy, более-менее приемлимо, потом подработать нюансы и верстать wink
 
Форум » Курсы графики от DIZ4U.info » Уроки фотошоп для всех » Профессиональный шаблон для блога (учимся делать простенькие шаблоны)
  • Страница 1 из 1
  • 1
Поиск: