Здравствуйте, в этом уроке я покажу Вам, как создать удивительный красочный дизайн блога в программе AdobePhotoshop. В этом уроке мы будем использовать только основные инструменты, такие как: инструмент Прямоугольник, Градиент, различные стили слоя, поэтому этот урок будет хорошей основой для новичков веб-дизайна. В результате выполнения данного урока Вы получите профессионально свёрстанный дизайн блога, который можно преобразовать в тему для WordPress.
Конечный результат:
Шаг 1. Создание нового документа
Создайте новый документ размером 1200x1800px. Откройте файл с текстурой, перейдите в Редактирование>Определить узор и нажмите ОК. Вернитесь к только, что созданному документу, перейдите в Редактирование Выполнить заливку, установите параметр Использовать — Регулярный, далее выберите только что определенную нами текстуру и нажмите ОК. Теперь у Вас должен получиться документ залитый отличной текстурой!
Шаг 2. Добавляем логотип к нашему блогу
Импортируйте файл логотипа и поместите в верхнюю часть холста. Используйте инструмент Прямоугольник со скругленными углами с параметром Радиус в 10px и нарисуйте прямоугольник. Затем придайте ему такие стили слоя:
Цвета градиента такие: #4e0101 и #ad1414.
Сейчас у Вас должно получиться что-то наподобие этого:
Шаг 3. Создаем и трансформируем выделение
Удерживая клавишу Ctrl, щелкните по миниатюре слоя. Далее кликните правой кнопкой мыши по выделению и выберите Трансформировать выделенную область. Трансформируйте выделение так, чтобы у Вас получился примерно такой результат как на изображении ниже:
Создайте новый слой и залейте это выделение белым цветом. Далее примените фильтр Размытие по Гауссу к данному слою с радиусом 20-50px. Это зависит от того, насколько светлое должно быть меню. Дублируйте данный слой несколько раз, также попробуйте поэкспериментировать с непрозрачностью.
Шаг 4. Добавляем текст к меню
С помощью инструмента Горизонтальный текст, используйте шрифт Lucida Fax. К слою с текстом примените такие стили:
Используя инструмент Прямоугольник со скругленными углами, создайте подменю и также примените к нему стили слоя(Цвета градиента: #c35a0c, #ffae00):
Вот, что у нас получилось:
Шаг 5. Добавляем металлическое свечение к подменю
Это очень важный шаг. Для того чтобы сделать наше подменю сделать более интересным, мы добавим несколько наклонённых градиентов. Зажмите клавишу Ctrl и щелкните левой кнопкой мыши по миниатюре слоя, чтобы создать его выделение. Далее проведите несколько градиентов, Вы также можете использовать клавишу Shift, чтобы градиенты были параллельными.
Также Вы можете стереть края градиентов. Установите Непрозрачность данному слою в 17%.
Шаг 6. Продолжаем работу с подменю
Я нашел несколько иконок в интернете и добавил их к пунктам подменю. Вы можете разместить там любую иконку. Как Вы видите в подменю нет названий подпунктов, поэтому давайте добавим их с помощью инструмента Горизонтальный текст. Далее я сделал поле для поиска по блогу в правой части верхнего меню, т.к. я не хотел оставлять много пустого места, но если меню у Вас большое это Вам не понадобиться.
Шаг 7. Делаем слайдер
Используя инструмент Прямоугольник со скругленными углами, создайте прямоугольник и примените к нему такие стили слоя: (Цвета градиента: #0a324c, #0088b5)
Теперь используя Шаг 5, добавьте градиенты к данной области. Примечание:Градиенты могут быть толще.
Шаг 8. Продолжаем работать над слайдером
Найдите любое изображение, обрежьте его и поместите на фон слайдера. Добавьте стиль слоя Обводка(Цвет: #072231):
Теперь зажмите клавишу Ctrl и щелкните левой кнопкой мыши по миниатюре слоя и с помощью инструмента Прямоугольная область. С помощью способа выделения Пересечение с выделенной областью, выделите нижнюю часть.
Создайте новый слой, залейте выделение черным цветом и измените, непрозрачность данному слою на 80-90%. Напишите какой-нибудь текст.
Шаг 9. Добавляем переключатели слайдера
Используя инструмент Карандаш, создайте несколько точек переключателя. Примените к ним такие стили слоя(Цвет для наложения: #072638):
«Выбранная» точка слайдера имеет цвет: #73a7bf и, конечно же, стиль слоя:
Шаг 10. Создаем сайдбар
С помощью инструмента Прямоугольник со скругленными углами создайте прямоугольник. Добавьте к нему такие стили слоя: (Цвета градиента: #da690e, #e3b410)
Проделайте Шаг 5, чтобы добавить данному прямоугольнику градиентов. Добавьте заголовок (LucidaFax, 14пт), также примените к текстовому слою такие стили:
Найдите какие-то фотографии, например в Google и добавьте им такую же обводку как в Шаге 8.
Шаг 11. Заключение
Итак, мы плавно подходим к концу нашего урока. Я рассказал Вам лишь основные моменты создания красочного дизайна блога, но если Вы хотите также добавить какие-то другие модули (например, область для входа на сайт, галерею), вот те цвета какие использовал я:
Область для входа: #cec0a5, #f7f6ef;
Галерея: #410c1e, #ec4a7c;
Twitter: #bbc9cf, #dee8ec.
Конечный результат: Красочный дизайн блога:
Спасибо за внимание, подписывайтесь на обновления, задавайте вопросы в комментариях, а также, если Вам понравился данный урок – поделитесь им с друзьями, я думаю, что они оценят Ваш совет!
До новых встреч! Пока.
Автор: Psdeluxe;
Переводчик: Сергей Заставный;