Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Web » Создание разметки Минималистского Блога в Фотошоп. Часть 2

Создание разметки Минималистского Блога в Фотошоп. Часть 2

Автор: Tina | Категория: Уроки Photoshop » Web | 7-12-2011, 12:38
Добавим направляющие с каждой стороны.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Выберем инструмент «Горизонтальный текст» (Horizontal Type Tool). Напечатай заголовок. Я использовал Adobe Garamond Pro. Вы можете использовать другой шрифт для этого. Убедитесь что вы находитесь в группу «Контент».

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Напечатайте Дату и детали автора.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Выделите область как показано ниже и заливку цветом #000000.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Установите Тень и обводку на выделенную область.

Создание разметки Минималистского Блога в Фотошоп. Часть 2

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Теперь можем вставить любую картинку в выделенную область. Вставьте изображение поверх слоя выделенной области и щелкните правой клавишей на слое, выберите «создать обтравочную маску» (Create Clipping Mask). Или нажмите Ctrl+Alt+G,

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Добавьте кнопку «Продолжить». Установите заливку #8e0a13,

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Начертите разделительную линию в 1 пиксель используя инструмент «Карандаш» (Pencil Tool).

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Создайте маленькую выделенную область. Установите те же стили слоя как для вышеуказанного. Добавьте параграф выбрав инструмент «Горизонтальный текст», щелкните и перетащите как мы делали для инструмента «Прямоугольная область». Таким образом можете создавать текст параграфа.

Создание разметки Минималистского Блога в Фотошоп. Часть 2

Создание разметки Минималистского Блога в Фотошоп. Часть 2

Добавьте немного постов.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Создайте номера страниц.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Шаг 8: Окно поиска
Начертите поле Поиска с помощью инструмента «Прямоугольная область» и установите заливку #ffffff. Установите расстояние в 20 пикселей между окном контента и полем поиска.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Установите небольшую внутреннюю тень.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Начертите кнопку. Установите заливку #8e0a13. Сделайте складчатый край. Добавьте текст.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Шаг 9: Добавление Бокового Контента
Выберите группу «Боковая Панель». Создайте окно контента используя инструмент «Прямоугольная область».

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Добавьте значок на рамку. Выберем Инструмент «произвольная Фигура» (Custom Shape Tool). Переключимся на категорию «Стрелка». Выберем стрелку и начертим.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Создайте свободное пространство в 20 пикселей с каждой стороны как прежде и добавьте направляющие. Напечатайте текст. Добавьте ведущие лини, чтобы разделить контент. Используя инструмент «Карандаш» шириной в 1 пиксель.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Добавьте больше контент рамок.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Шаг 10: Нижний Колонтитул
Создайте новый слой в группу «Нижний Колонтитул». Сделайте горизонтальное выделение в низу и залейте цветом #000000.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Наш Колонтитул выглядит обычно. Давайте придадим ему немного привлекательности. Начертим форму, используя инструмент «Магнитное лассо» и заполним цветом колонтитула.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Добавим ссылки навигации и информации о защите прав.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Шаг 10: Создадим и установим Узор
Мы закончили с дизайном. Теперь сделаем черепичный узор, используя инструмент «Карандаш». Откройте новый документ и создайте узор, показанный ниже используя инструмент «Карандаш» шириной 1 пиксель. Уберите фон и выделите узор, и выберите Редактирование>Установить Узор (Edit>Define pattern).

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Создайте новый слой поверх фонового слоя. Нажмите Shift+F5. Откроется окно заливки. Выберите узор, который мы создали. Нажмите «Ok» чтобы применить узор.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Нам необходимо смешать узор с фоном. Щелкните два раза на слое с узором. Отрегулируйте непрозрачность. Примените «Наложение если» с помощью черно-белых бегунков в разделе «Данный слой». Выберите черный бегунок и перетащите его на право. Вы сможете видеть наложение узора на фон. Вдобавок можете отрегулировать сглаженность и диапазон наложения. Зажмите клавишу «Alt», кликните на бегунке и перетащите его. Это действие разделит бегунок на части. Регулируйте их, пока не станет выглядеть хорошо.

Создание разметки Минималистского Блога в Фотошоп. Часть 2


Результат

Создание разметки Минималистского Блога в Фотошоп. Часть 2


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

Другие новости по теме:


Просмотров: 1047 | Напечатать | Комментарии (4)

#1 написал: untitled (12 декабря 2011 01:02)
Это перевод?
#2 написал: Tina (12 декабря 2011 13:31)
untitled,
Да.
#3 написал: untitled (14 декабря 2011 08:17)
А где смотреть источник, подскажите пожалуйста?
#4 написал: Tina (22 декабря 2011 01:46)
untitled,
А какой источник вас интересует?
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Создание шоколадного вулкана с использованием 3D-эффектов. Часть 1
Создание шоколадного вулкана с использованием 3D-эффектов. Часть 1

Часть 1


Дизайн завораживающего постера для Часа Земли
Дизайн завораживающего постера для Часа Земли


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


Выделенные области в Photoshop Часть 2
Выделенные области в Photoshop Часть 2

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

Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.