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

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

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

Сложность: низкая Время: до 1 часа

Для начала, создадим новый документ размерами 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 дизайна. Кликните, чтобы увеличить: Делаем компактный сайт - визитку - уроки фотошоп Ссылка на источник: www.photoshopstar.com

Комментариев 4

  1. Офлайн
    Алексей
    Алексей 20 мая 2011 22:10
    + 0 -
    Хороший урок! Ирина вы просто молодец)
  2. Офлайн
    Yara 20 мая 2011 22:30
    + 0 -
    О, спасибо! Но моя заслуга только в том, что я этот урок выбрала и разместила ) Мы будем и дальше публиковать уроки по Веб-дизайну!
  3. Офлайн
    Алекса
    Алекса 18 августа 2011 14:09
    + 0 -
    Вы такие визитки делаете? http://saitikmini.narod.ru http://macrosait.narod.ru
  4. Офлайн
    admin
    admin 18 августа 2011 18:23
    + 0 -
    Да, дизайн таких визиток мы делаем

Добавить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив
  • Яндекс.Метрика