Потрясающе стильный шаблон сайта
Нравится(+) 0 Не нравится(-)

Потрясающе стильный шаблон сайта - уроки фотошоп


Создайте стильный сайт используя свет и тени. Сделайте его так, будто вырезали его ножницами из бумаги и рисовали цветными карандашами. Получится очень стильно и профессионально!


Сложность: высокая
Время: более 1 часа


Навыки для «прокачки»
- создание разметки сайта
- работа со свойствами слоев и режимами смешивания
- использование линеек и направляющих
- создание объема и теней элементов

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

Скачайте Шрифты : Chunkи Gabrielle
Скачайте бесплатно кисти клякс

Также скачайте рисованные иконки

Для начала надо сделать набросок сайта. Примерно так это выглядит на бумаге:

Потрясающе стильный шаблон сайта - уроки фотошоп

Наш макет, фон, размером 500 500 пикс.
Итак, давайте начнем с создания нового документа 500 500 пикселей в Photoshop. Убедитесь в том, что у вас установлено разрешение 72 пикс/дюйм, так как это идеальное разрешение для изображений, предназначенных для сеток.

Потрясающе стильный шаблон сайта - уроки фотошоп

Залейте фон цветом # d9cfc0

Потрясающе стильный шаблон сайта - уроки фотошоп

Вставьте текстуру бумаги. Вы можете найти ее интернете. Теперь мы обесцветим ее с помощью  Shift + Ctrl + U, изменим режим смешивания на Умножение=Multiply и Непрозрачность= Opacity до 20%.
У вас должно получиться что-то вроде этого

Потрясающе стильный шаблон сайта - уроки фотошоп

Это изображение будет фоном нашего документа. Перейдите в Редактировать-Определить узор=Edit-Define Pattern и придумайте название.

Потрясающе стильный шаблон сайта - уроки фотошоп

Теперь мы можем заполнить фон макета, созданного ранее. Выберите фоновый слой и зайдите в Редактирование-Выполнить заливку=Edit-Fill.

Потрясающе стильный шаблон сайта - уроки фотошоп

Создайте новый слой и, используя большую, мягкую Кисть=Brush, создадим нежный эффект света в верхней части макета. Уменьшим Непрозрачность= Opacity этого слоя до 30%.

Потрясающе стильный шаблон сайта - уроки фотошоп

Также создадим еще один слой и закрасим его с помощью приложенных к уроку кистей. Это позволит добавить больше деталей к верхней части.  Как только фон готов, сгруппируйте все слои (выберите все слои и нажмите Ctrl + G) назовите эту группу Фон.

 

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

Потрясающе стильный шаблон сайта - уроки фотошоп

 

Захватите прямоугольник, и сделайте выделение, как показано ниже.

Потрясающе стильный шаблон сайта - уроки фотошоп

Нажмите Alt и на кнопку Маски слоя =Add a mask в нижней части палитры слоев. Это создаст маску, которая будет скрывать выделенную область.

Потрясающе стильный шаблон сайта - уроки фотошоп

Создайте круг с диаметром 20 пикселей. Чтобы создать форму с фиксированными размерами выберите инструмент Эллипс=Ellipse Tool, с настройками как на картинке ниже.

Потрясающе стильный шаблон сайта - уроки фотошоп

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

Потрясающе стильный шаблон сайта - уроки фотошоп

В основном документе, создайте новый слой, и сделайте выделение на 60 пикселей высотой в верхней части.

Потрясающе стильный шаблон сайта - уроки фотошоп

Заполните это выделение и уменьшите Непрозрачность= Opacity слоя на 50%

Потрясающе стильный шаблон сайта - уроки фотошоп

Создайте прямоугольник 5 пикс. высоты, цвет # 506271 и поместите его в верхней части макета.

Потрясающе стильный шаблон сайта - уроки фотошоп

После завершения фона заголовка, мы можем добавить меню в правом верхнем углу. В уроке используется шрифт Arial и размер шрифта 13pt. Цвет текста используется синий для верхней панели.

Потрясающе стильный шаблон сайта - уроки фотошоп

Для логотипа, создадим Эллипс= Ellipse Tool со следующими настройками:

Stadion-Kuban.ru

Виджет на Яндексе: yandex.ru/?add=111794

Мы ВКонтакте:

И в Твиттере: twitter.com/Stadion-Kuban

Информация
Автор / Разработчик
Автор не указан
Перевел
Автор перевода не указан
Сложность
Усложненная
Источник
Источник не указан
Добавил
Yara
Дата
9-06-2020, 20:25
Метки:  еще статьи

Поделиться ссылкой

Прямая ссылка:
BB-code ссылка:
HTML ссылка:

Комментарии (0)

Имя
Эл. почта
Комментарий
Вопрос: 5 * 5 =

Для активации данной функции необходимо зарегистрироваться и авторизоваться на сайте.

Ваш IP: 207.241.237.222
Последние уроки
Опубликовано 14-10-2020, 21:33
Опубликовано 13-10-2020, 20:50
Опубликовано 11-10-2020, 11:28
Опубликовано 7-10-2020, 20:00
Опубликовано 25-09-2020, 19:33
Опубликовано 24-09-2020, 18:42
Архив сайта
.