Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:


Тема для блога Wordpress


Настройка холста:
Создайте новый документ:


Тема для блога Wordpress


Инструментом Заливка (Paint Bucket Tool) залейте фон цветом #d9d9d9.

Создание области контента
Выберите инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 30 пикселей.


Тема для блога Wordpress


В новом слое создайте большой прямоугольник:


Тема для блога Wordpress


Примените следующие стили к этой фигуре в меню Стилей слоя (Layer Style - Blending Options):

Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Тема для блога Wordpress


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Тема для блога Wordpress


Создание заголовка
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение, как показано ниже. Высота выделения – 123 пикселя.


Тема для блога Wordpress


Залейте выделение любым цветом в новом слое и примените следующие стили в меню Стилей слоя (Layer Style - Blending Options):

Отбрасывание тени (Режим – Умножение):


Тема для блога Wordpress


Внутренняя тень (Режим – Нормальный):


Тема для блога Wordpress


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Тема для блога Wordpress


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Тема для блога Wordpress

Тема для блога Wordpress


На левой стороне прямоугольника создайте выделение инструментом Многоугольное лассо (Polygonal Lasso Tool).


Тема для блога Wordpress


Залейте выделение любым цветом в новом слое под слоем с большим прямоугольником. Потом примените такие стили:

Наложение цвета (Режим – Нормальный):


Тема для блога Wordpress


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Тема для блога Wordpress

Тема для блога Wordpress


Внутри прямоугольника добавьте заголовок и слоган. Над заголовком сайта напишите названия разделов. Один из них подсветите инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool).


Тема для блога Wordpress


Создание новости блога
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение, как показано ниже. Выделение должно заканчиваться на середине области контента.


Тема для блога Wordpress


Залейте выделение любым цветом в новом слое и примените такие стили:

Отбрасывание тени (Режим – Умножение):


Тема для блога Wordpress


Внутренняя тень (Режим – Нормальный):


Тема для блога Wordpress


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Тема для блога Wordpress


Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):


Тема для блога Wordpress

Тема для блога Wordpress


Инструментом Многоугольное лассо (Polygonal Lasso Tool) создайте угол в левом нижнем углу фигуры, как мы это делали для заголовка.


Тема для блога Wordpress


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


Тема для блога Wordpress


Под этой новостью создайте разделитель – две 1-пиксельные линии разного цвета:


Тема для блога Wordpress


Под этой линией вставьте дату и уведомление о комментариях с соответствующими иконками.


Тема для блога Wordpress


Таким же образом создайте ещё несколько новостей.


Тема для блога Wordpress


Внизу создайте навигацию.


Тема для блога Wordpress


Сайдбар
Справа от новости создайте две 1-пиксельные линии, как показано ниже:


Тема для блога Wordpress


Растяните этот вертикальный разделитель вниз до конца.
Справа создайте полоску заголовка сайдбара.


Тема для блога Wordpress


Под этим заголовком создайте список с разделителями.


Тема для блога Wordpress


Таким же образом создайте поле спонсоров:


Тема для блога Wordpress


Футер
В этом дизайне я хочу создать большой футер. Создайте большую область с треугольниками внизу.


Тема для блога Wordpress


В этот прямоугольнике добавьте разную информацию, которая должна содержаться в футере.


Тема для блога Wordpress


Финальный результат:


Тема для блога Wordpress




Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

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

Введите код: