
В этом уроке, я собираюсь рассказать Вам, как сделать оригинальный шаблон для вашего сайта-визитки и показать, что уроки 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 дизайна. Кликните, чтобы увеличить:
