Делаем компактный сайт - визитку 0

Делаем компактный сайт - визитку - уроки фотошоп


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


Для начала, создадим новый документ размерами 1000*700 пикселей, с разрешением 72 пикселя. Теперь нужно найти шаблон, чтобы добавить на задний план, или можете скачать этот. Откройте его, и перейдите Edit > Define Pattern = Редактирование > Определить узор, чтобы сохранить изображение как узор, после чего, вернитесь к Вашему основному документу и используя Paint Bucket Tool = Заливка, необходимо заполнить фон.

Делаем компактный сайт - визитку - уроки фотошоп

Затем нажмите Ctrl + Shift + E, чтобы обесцветить его.

Делаем компактный сайт - визитку - уроки фотошоп

Примените стиль слоя Color Overlay = Наложение цвета Делаем компактный сайт - визитку - уроки фотошоп

Вот что у Вас должно получиться на данном этапе:

Делаем компактный сайт - визитку - уроки фотошоп

Отлично! С фоном мы закончили, перейдем к следующему этапу. Теперь мы создадим окно, для содержания. Создайте новый слой, затем выберите Rectangular Marquee Tool = Волшебная палочка , чтобы сделать выделение, как на картинке ниже, и заполните его цветом # f4f4f4.

Делаем компактный сайт - визитку - уроки фотошоп

Снимаем выделение с помощью клавиш Ctrl + D. Затем мы придадим нашему документу вид бумаги. Используйте инструмент Elliptical Marquee Tool = Эллипс, чтобы сделать небольшой круг, как на картинке ниже, и нажмите на кнопку, Удалить, чтобы очистить выделенную область.

Делаем компактный сайт - визитку - уроки фотошоп

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

Делаем компактный сайт - визитку - уроки фотошоп

Снимаем выделение с помощью Ctrl + D и переходим к следующему шагу. Время делить площадь листа на три основных части: описание, логотип и иконки. Выберите инструмент Line Tool = Линейка толщиной линии около 4 пикселей, черного цвета, а затем нужно вытянуть ее по всей длине документа. После этого, устанавливаем непрозрачность 15% для этого слоя.

Делаем компактный сайт - визитку - уроки фотошоп

Добавим еще две строчки.

Делаем компактный сайт - визитку - уроки фотошоп

Время, чтобы добавить ярлыки. Не знаете как это сделать? Позвольте мне показать вам. Создадим новый слой и сделаем прямоугольник с помощью инструмента Rectangular Marquee Tool = Прямоугольная область. Заливаем выделенную область цветом # e04e21.

Делаем компактный сайт - визитку - уроки фотошоп

Затем выберите Polygonal Lasso Tool = Прямолинейное Лассо, чтобы создать еще одно выделение, как показано на картинке ниже.

Делаем компактный сайт - визитку - уроки фотошоп

Затем с помощью инструмента Burn Tool = Кисть (45 пикселей, Жесткость: 30%), добавим темные пятна в области этикетки.

Делаем компактный сайт - визитку - уроки фотошоп

Затем с помощью Dodge Tool = Осветлитель (Кисть: 45 пикселей, Жесткость: 30%) добавим объем формуе этикетки.

Делаем компактный сайт - визитку - уроки фотошоп

После этого инвертируем выделение Ctrl + Shift + I и сделаем Dodge = Осветление немного больше.

Делаем компактный сайт - визитку - уроки фотошоп

Снимаем выделение с помощью Ctrl + D и нажимаем Ctrl + T, чтобы повернуть этикетку, а затем применим Edit > Transform > Warp = Редактирование > Трансформирование > Деформация, чтобы немного изменить форму.

Делаем компактный сайт - визитку - уроки фотошоп

Теперь пришло время, добавить тень к этикетке. Добавим следующий стиль слоя Drop Shadow = Тень

Делаем компактный сайт - визитку - уроки фотошоп

Затем щелкните правой кнопкой мыши на уменьшенной копии слоя и выберите, Create Layer = Создать слой.

Делаем компактный сайт - визитку - уроки фотошоп

К слою применим Edit> Transform> Distort = Редактирование > Трансформирование > Искажение Делаем компактный сайт - визитку - уроки фотошоп

Теперь нам нужно добавить текст. Выберите инструмент Horizontal Type Tool = Горизонтальный текст и напишите название ярлыка.

Делаем компактный сайт - визитку - уроки фотошоп

В уроке использован шрифт Bernhard Modern.
Теперь поверните текст немного, использованием Ctrl+T.

Делаем компактный сайт - визитку - уроки фотошоп

Первый ярлык готов. Добавьте еще две этикетки таким же образом.

Делаем компактный сайт - визитку - уроки фотошоп

Отлично, переходим к следующему шагу. Нам необходимо добавить содержимое. Это могут быть "превьюшки" ваших собственных работ. Откроем его и обрезаем нужный фрагмент инструментом Crop tool = Рамка Затем поместим его на наш документ и уменьшим немного.

Делаем компактный сайт - визитку - уроки фотошоп

Примените стиль слоя Inner Glow = Внутреннее свечение Делаем компактный сайт - визитку - уроки фотошоп

Результат должен быть следующим

Делаем компактный сайт - визитку - уроки фотошоп

Теперь нам нужно добавить название нашему сайту с кратким описанием. Выберите инструмент Horizontal Type Tool = Горизонтальный текст снова и напишите текст в несколько строк, используя цвет # 45454 и шрифт Tahoma.

Делаем компактный сайт - визитку - уроки фотошоп

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

Делаем компактный сайт - визитку - уроки фотошоп

Хорошо, после этого перейдем к следующему шагу. Мы напишем название нашему сайту. Выберите Horizontal Type Tool = Горизонтальный текст и напишите название, используя цвет # b2d763 и шрифт Bernhard Modern.

Делаем компактный сайт - визитку - уроки фотошоп

После этого добавим стили слоя тексту Drop Shadow = Тень и Gradient Overlay = Наложение градиента

Делаем компактный сайт - визитку - уроки фотошоп

Делаем компактный сайт - визитку - уроки фотошоп

Вот что должно получиться

Делаем компактный сайт - визитку - уроки фотошоп

И последнее, что нам нужно добавить, наши контакты в нижней части сайта.

Делаем компактный сайт - визитку - уроки фотошоп

Используя шрифт Tahoma цвета текста # # f4f4f4 и d5ea9f. Отлично, наш сайт готов! Надеюсь, вам понравился этот урок, и вы с удовольствием будете выполнять уроки WEB дизайна. Кликните, чтобы увеличить:

Делаем компактный сайт - визитку - уроки фотошоп

Сайт: designlessons.ru

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

Мы ВКонтакте: vk.com/designlessons

И в Твиттере: twitter.com/DesignLessons

Информация
Автор / Разработчик
Автор не указан
Перевел
Автор перевода не указан
Сложность
Легкая
Источник
Добавил
Yara
Дата
20-05-2019, 19:21
Метки:  еще статьи

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

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

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

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

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

Ваш IP: 204.236.235.245
Последние уроки
Вконтакте
Архив сайта
Карта Сайта