С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Создание простой темы для Wordpress в Фотошопе

Создание простой темы для Wordpress в Фотошопе

В этом уроке мы будем создавать простую тему для WordPress в Photoshop. Данный урок подойдёт людям с любым уровнем владения Фотошопом.

 

Создание простой темы для Wordpress в Фотошопе

 

Это будет просто образец дизайна темы, созданный в Photoshop. Рабочий демо-шаблон будет чуть позже, вместе с уроком, который будет включать в себя преобразование PSD-макета в рабочий HTML/CSS-код.  Откройте Photoshop и начнем!

 

Создание простой темы для Wordpress в Фотошопе

 

Ресурсы для этого урока

 

Иконки

Навигация

 

Шаг 1: Создание документа

 


Открываем Photoshop и создаем новый документ размером в 1200 на 1850 пикселей.

 

Создание простой темы для Wordpress в Фотошопе

 

Убедитесь, что вы включили линейку и направляющие

 

Линейка: Ctrl + R

 

Направляющие: Ctrl + ;

 

Давайте создадим первые направляющие. Перейдите в меню  Просмотр> Новая направляющая (View> New Guide) и создайте вертикальную направляющую в положении120 пикселей. Повторите действие и измените значение на 1080 пикселей.

 

Создание простой темы для Wordpress в Фотошопе

 

Шаг 2: Работа с фоном

 

Дублируйте фоновый слой и залейте его цветом # f8f8f8. Далее мы создадим простой точечный узор. Создайте новый документ размером в 15 на15 пикселей. Увеличьте новый документ, нажав комбинацию клавиш Ctrl + . Скройте фоновый слой и создайте новый слой, используя инструмент Карандаш (Pencil Tool) создайте точку в левом верхнем углу нашего холста.

 

Создание простой темы для Wordpress в Фотошопе


 

Перейдите в меню Редактирование> Определить узор (Edit> Define Pattern), назовите его пунктиром. Теперь вернемся к нашему макету. Создайте новый слой выше фона и с помощью инструмента Заливка (Paint Bucket) предварительно выбрав ваш точечный узор залейте слой и снизьте его Непрозрачность (Opacity) до 15% . Сгруппируйте все слои, которые мы только что создали и назовите их «фон».

 

Создание простой темы для Wordpress в Фотошопе

 

Используя инструмент Прямоугольник (Rectangle Tool) с цветом # 363636 нарисуйте прямоугольник высотой в 10 пикселей, начиная с верхней левой части холста с правой стороны.

 

Создание простой темы для Wordpress в Фотошопе

 

Шаг 3: Работа с логотипом

 

Создание простой темы для Wordpress в Фотошопе

 

Возьмите инструмент Прямоугольник со скруглёнными углами (Rounded Rectangle Tool) и создайте квадрат размером в 38 на 38 пикселей и цветом  # f7941d. Далее возьмите инструмент Горизонтальный текст (Text Tool), выберите шрифт Myriad Pro, сделайте его жирным и задайте размер в  36 пунктов. Напишите букву «М», как показано на изображении ниже.

 

Создание простой темы для Wordpress в Фотошопе

 

Добавьте Слой-маску (Layer Mask) к форме, которую мы только что создали, нажав на кнопку в панели слоев.

 

Создание простой темы для Wordpress в Фотошопе

 

Выберите Слой-маску (Layer Mask) затем зажмите клавишу Ctrl  и кликните на текстовом слое, чтобы сделать выделение, затем залейте его цветом # 000000

 

Создание простой темы для Wordpress в Фотошопе

 

Возьмите инструмент Горизонтальный текст (Text Tool) и выберите шрифт Myriad Pro.

 

Для надписи «Myriad Pro» используйте размер шрифта в 24 пункта и цвет # 363636.

 

Для надписи «Best choice of font» используйте размер шрифта в 12 пунктов и цвет # 959595.

 

Создание простой темы для Wordpress в Фотошопе

 

Шаг 4: Работа с иконками

 

Откройте социальные иконки, измените размер изображения до 19 на19 пикселей, нажав комбинацию клавиш Alt + Ctrl + I и измените значения высоты и ширины. Поместите иконки в наш холст в новую группу с именем «иконки», см. изображение ниже для позиционирования и цвета.

 

Создание простой темы для Wordpress в Фотошопе

 

Шаг 5: Работа с навигацией

 

Создание простой темы для Wordpress в Фотошопе

 

Создайте новую группу и назовите её «навигация». Как вы можете видеть на изображении выше, есть прямоугольные формы с обводкой сделанные с помощью инструмента Прямоугольник (Rectangle Tool) с высотой 90 пикселей.

 

Добавьте стили слоя:

 

Наложение градиента (Gradient Overlay): Используйте цвета # f8f8f8, # fcfcfc.

 

Создание простой темы для Wordpress в Фотошопе

 

Обводка (Stroke): Используйте цвет # c2c2c2.

 

Создание простой темы для Wordpress в Фотошопе

 

Откройте иконки навигации и измените их размер на 22 х 22 пикселей. Создайте новую группу внутри группы «навигация», назовите её «иконки» и поместите туда ваши иконки. Теперь у нас есть иконки, далее нужно расставить наши навигационные ссылки. Следуйте инструкциям на изображении ниже.

 

Создание простой темы для Wordpress в Фотошопе

 

Объедините все строки, которые вы сделали, нажав комбинацию клавиш Ctrl + E. Дублируйте объединённый слой и переместить его на 1 пикселей вправо, нажав на клавишу со стрелкой вправо на клавиатуре.

 

Создание простой темы для Wordpress в Фотошопе

 

Шаг 6: Поисковая форма

 

Создайте новую группу выше навигации и назовите её «поиск».  Используя инструмент Прямоугольник (Rectangle Tool) с цветом # FFFFFF и создайте форму, как показано на изображении ниже.

 

Создание простой темы для Wordpress в Фотошопе

 

Добавьте стили слоя:

 

Обводка (Stroke): Используйте цвет c2c2c2.

 

Создание простой темы для Wordpress в Фотошопе

 

Теперь создадим кнопку поиска, для этого используйте инструмент Прямоугольная выделенная область (Rectangular Marquee Tool) и создайте прямоугольник размером в 40 на 35 пикселей и залейте его любым цветом.

 

Создание простой темы для Wordpress в Фотошопе

 

Добавьте стили слоя:

 

Наложение градиента (Gradient Overlay): Используйте цвета # f8f8f8, # fcfcfc.

 

Создание простой темы для Wordpress в Фотошопе

 

Обводка (Stroke): Используйте цвет # FFFFFF.

 

Создание простой темы для Wordpress в Фотошопе

 

Затем в центр кнопки поместите икону лупы размером 19 на19 пикселей.

 

Создание простой темы для Wordpress в Фотошопе

 

С помощью инструмента Горизонтальный текст (Text Tool) добавьте текст в поле области поиска.

 

Создание простой темы для Wordpress в Фотошопе

 

Шаг 7: Создание слайдера

 

Создание простой темы для Wordpress в Фотошопе

 

Выберите инструмент Прямоугольник (Rectangle Tool) с цветом заливки # FFFFFF и создайте форму размером в 630 на 340 пикселей.

 

Добавьте стили слоя:

 

Обводка (Stroke): Используйте цвет # c2c2c2.

 

Создание простой темы для Wordpress в Фотошопе

 

Выберите слой с формой и нажав клавишу Ctrl кликните  на слое-фигуре. Перейдите в меню Выделение> Модификация> Граница (Select> Modify> Contract) и установите значение в 10 пикселей.

 

Создание простой темы для Wordpress в Фотошопе

 

Залейте выделение любым цветом и поместите образец изображения того же размера.

 

Создание простой темы для Wordpress в Фотошопе

 

Под слоем с формой создайте новый слой и назовите его «Тень». Используя инструмент Перо (Pen Tool) создайте форму, как показано на рисунке ниже и залейте её цветом # 000000.

 

Создание простой темы для Wordpress в Фотошопе

 

Примените фильтр Размытие по Гауссу (Gaussian Blur) с радиусом в 2 пикселя. Снизьте Непрозрачность (Opacity) слоя до 40%.

 

Создание простой темы для Wordpress в Фотошопе

 

Используя инструмент Эллипс (Ellipse Tool) создайте четыре формы, как показано на изображении ниже. Убедитесь, что они выравнены по центру.

 

Создание простой темы для Wordpress в Фотошопе

 

Добавьте стили слоя:

 

Наложение цвета (Color Overlay): Используйте цвет # c2c2c2.

 

Создание простой темы для Wordpress в Фотошопе

 

Внутренняя тень (Inner Shadow): Используйте цвет # 000000.

 

Создание простой темы для Wordpress в Фотошопе

 

Цвет # c2c2c2 будет использоваться для неактивных окон нашего слайдера, для активного изменения состояния используйте цвет # f7941d.

 

Создание простой темы для Wordpress в Фотошопе

 

Шаг 8: Создание области публикаций

 

Создание простой темы для Wordpress в Фотошопе

 

Для начала создайте новую группу и назовите ее «публикации». Используя инструмент Прямоугольник (Rectangle Tool) с заливкой цветом # FFFFFF создайте прямоугольник размером в 630 на 300 пикселей.

 

Добавьте стили слоя:

 

Обводка (Stroke): Используйте цвет # c2c2c2.

 

Создание простой темы для Wordpress в Фотошопе

 

Создайте еще ​​одну форму размером 200 на200 пикселей используя инструмент Прямоугольник (Rectangle Tool) и добавьте такой же стиль слоя.

 

Создание простой темы для Wordpress в Фотошопе

 

Зажмите клавишу Ctrl и кликните  на слое-фигуре. Перейдите в меню Выделение> Модификация> Граница (Select> Modify> Contract) и установите значение в 10 пикселей.

 

Создание простой темы для Wordpress в Фотошопе

 

Залейте выделение любым цветом и поместите образец изображения миниатюры. С помощью инструмента Горизонтальный текст (Text Tool) нанесите название поста, автора, дату публикации, содержание и т.д.

 

Создание простой темы для Wordpress в Фотошопе

 

Далее давайте сделаем кнопку «читать» для нашего поста. Создайте новую группу внутри группы «публикации» и назовите её «more». Используя инструмент Прямоугольник (Rectangle Tool) создайте кнопку размером в 88 на30 пикселей.

 

Добавьте стили слоя:

 

Внутреннее свечение (Inner Glow): Используйте цвет # FFFFFF.

 

Создание простой темы для Wordpress в Фотошопе

 

Наложение градиента (Gradient Overlay): Используйте цвета # f1f1f1, # fbf9f9.

 

Создание простой темы для Wordpress в Фотошопе

 

Обводка (Stroke): Используйте цвет # c2c2c2.

 

Создание простой темы для Wordpress в Фотошопе

 

Создание простой темы для Wordpress в Фотошопе

 

Далее я просто взял изображение социальных кнопок Digg, Facebook и Твиттер и вставил его в левом нижнем углу поста.

 

Создание простой темы для Wordpress в Фотошопе

 

Дублируйте группу «публикация» и поместите её как показано на изображении ниже.

 

Создание простой темы для Wordpress в Фотошопе

 

Шаг 9: Постраничная навигация

 

Создание простой темы для Wordpress в Фотошопе

 

Создайте новую группу и назовите ее «страницы». Создать фигуру размером в 26 на 26 пикселей с помощью инструмента Прямоугольник (Rectangle Tool). Для неактивных страниц используйте стиль  Обводка (Stroke) и цвет # c2c2c2. Для активной страницы скопируйте стили слоя, которые мы использовали для  «more» и примените его к форме.

 

Создание простой темы для Wordpress в Фотошопе

 

Шаг 10: Рекламные блоки

 

Создание простой темы для Wordpress в Фотошопе

 

Создайте новую группу и назовите ее «сайдбар». Создайте еще ​​одну группу внутри группы «сайдбар» и назовите её «рекламный блок». Используя инструмент Прямоугольник (Rectangle Tool) и цвет # ebebeb создайте форму размером  145 на145 пикселей. Затем снизьте Непрозрачность (Opacity) слоя до 50%.

 

Создание простой темы для Wordpress в Фотошопе

 

Зажмите клавишу Ctrl и кликните  на слое-фигуре. Перейдите в меню Выделение> Модификация> Граница (Select> Modify> Contract) и установите значение в 10 пикселей.

 

Создание простой темы для Wordpress в Фотошопе

 

Дублируйте рекламный блок четыре раза и разместите дубликаты, как показано на изображении ниже.

 

Создание простой темы для Wordpress в Фотошопе

 

Шаг 11: Работа с вкладками

 

Создание простой темы для Wordpress в Фотошопе

 

Создать новую группу в сайдбаре и назовите её «вкладки». Теперь выберите инструмент Прямоугольник (Rectangle Tool) и цвет # ebebeb создайте форму в 300 на 500 пикселей, отступив от рекламного блока 35 пикселей. Затем снизьте Непрозрачность (Opacity) слоя до 50%.

 

Создание простой темы для Wordpress в Фотошопе

 

Зажмите клавишу Ctrl и кликните  на слое-фигуре. Перейдите в меню Выделение> Модификация> Граница (Select> Modify> Contract) и установите значение в 10 пикселей.

 

Создание простой темы для Wordpress в Фотошопе

 

Создайте вкладки, используя инструменты Линия (Line Tool) и Горизонтальный текст (Text Tool).

 

Создание простой темы для Wordpress в Фотошопе

 

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

 

Создание простой темы для Wordpress в Фотошопе

 

Добавьте стили слоя:

 

Наложение градиента (Gradient Overlay): Используйте цвета # f1f1f1, fbf9f9.

 

Создание простой темы для Wordpress в Фотошопе

 

Создание простой темы для Wordpress в Фотошопе

 

Теперь создадим образец поста. Для начала найдите образец миниатюры, размером 60 на 60 пикселей. Кроме того, мы добавим название поста, дату публикации и рубрику, в которой пост опубликован.

 

Создание простой темы для Wordpress в Фотошопе

 

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

 

Создание простой темы для Wordpress в Фотошопе

 

Я также добавил образец рекламы размером 300 на 300 пикселей.

 

Создание простой темы для Wordpress в Фотошопе

 

Шаг 12: Футер

 

Создание простой темы для Wordpress в Фотошопе

 

Создайте новую группу и назовите ее «футер». Используя инструмент Прямоугольник (Rectangle Tool) и цвет # 363636 создайте форму размером в 1200 на 485 пикселей.

 

Создание простой темы для Wordpress в Фотошопе

 

Теперь давайте создадим новый узор. Создайте новый документ размером 6 на 6 пикселей. Скройте фоновый слой и создайте новый слой. Установите цвет переднего плана  # 363636, далее используя инструмент Карандаш (Pencil Tool) создайте рисунок, как показано на изображении ниже.

 

Создание простой темы для Wordpress в Фотошопе

 

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

 

Создание простой темы для Wordpress в Фотошопе

 

Давайте создадим еще один узор. Создайте новый документ размером  12 на  12 пикселей. Измените цвет на # 303030. Используя инструмент Карандаш (Pencil Tool) создайте рисунок, как показано на изображении ниже.

 

Создание простой темы для Wordpress в Фотошопе

 

На новом слое заполните весь подвал шаблоном, который мы только что сделали.

 

Создание простой темы для Wordpress в Фотошопе

 

В подвал мы поместим твиты, популярные записи  и информацию о сайте. Создайте отдельную группу для каждой категории. Сначала мы будем работать с группой «твиты». Возьмите инструмент Горизонтальный текст (Text Tool) и напишите текст так же, как показано на изображении ниже.

 

Создание простой темы для Wordpress в Фотошопе

 

В «популярные записи» просто скопируйте группу «свежие записи».

 

Создание простой темы для Wordpress в Фотошопе

 

Теперь сделаем блок «о сайте». Возьмите текст любой подходящий текст и поместите его как показано на изображении ниже. Кроме того, я поместил наш логотип и добавил стиль Наложение цвета (Color Overlay) с заливкой цветом # 6d6e71.

 

Создание простой темы для Wordpress в Фотошопе

 

И в завершении, выберите инструмент Прямоугольник (Rectangle Tool) с цветом # 252525 и создайте форму высотой в 40 пикселей, затем с помощью инструмента Горизонтальный текст (Text Tool) добавил текст с копирайтами, цвет текста # 616264.

 

Создание простой темы для Wordpress в Фотошопе

 

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

 

Создание простой темы для Wordpress в Фотошопе



Автор урока: Майкл Джон Бернс


Переводчик урока: Ирина Шипилова 

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



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 08.07.2012
  •   Просмотров: 6677
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Иван (12.04.2013 | 16:12)

Хороший и полезный урок красивый получился шаблон ну и у вас хороший шаблон для блога

Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

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

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки