Совет 1: Как сделать кнопки для сайта в фотошопе

Удобная навигация – ключевой момент, который делает веб-сайт комфортным для посещения и привлекательным как для владельца, так и для посетителей в сети. Элементы меню и навигации должны быть понятными, красивыми и лаконичными, и хорошей идеей будет создать привлекательные кнопки для вашего интернет-сайта в графическом редакторе Adobe Photoshop. Сделать это несложно.
Инструкция
1
Создайте новый документ и на панели инструментов выберите Rounded Rectangle Tool. Нарисуйте узкий прямоугольник со скругленными углами, а затем выберите на панели инструментов Elliptical Marquee Tool и в левой части прямоугольника нарисуйте круг, перекрывающий его края и выходящий за его пределы.
2
Правой клавишей мыши щелкните на слое с прямоугольником и выберите опцию Rasterize Layer, а затем в центре выделения снова кликните мышью и выберите в контекстном меню опцию Layer via Cut, чтобы скопировать выделение на новый слой.
3
Откройте меню настроек слоя и во вкладке Drop Shadow установите режим смешивания Normal, прозрачность на 23%, а дистанцию на 3 пикселя. Во вкладке Color Overlay установите нужный цвет при режиме смешивания Normal и прозрачности в 100%. У вас должно получиться двухцветное изображение.
4
Снова выберите на панели инструментов Elliptical Marquee Tool и внутри левого цветного выделения нарисуйте кружок. Нажмите Delete. После этого перенесите выделение на новый слой и залейте его любым цветом.
5
Откройте снова меню Layer Style и настройте вкладку Gradient Overlay в любых цветах, которые подходят к цветовой гамме вашего сайта. Установите радиальный стиль градиента. Затем во вкладке Stroke установите толщину обводки в 2 пикселя, внешнюю позицию контура, а также прозрачность в 30%. Выберите градиентную заливку обводки. Нажмите ОК.
6
На панели инструментов выберите кисть белого цвета, настройте ее так, чтобы она была мягкой, а диаметр кисти составлял 10 пикселей. В правой верхней части окрашенного вами круга поставьте точку, чтобы нарисовать блик.
7
Затем выберите слой с основной частью кнопки и в меню Layer Style установите параметр Inner Shadow с режимом смешивания Multiply и прозрачностью в 33%. Установите линейный градиент с прозрачностью в 25%. Ваша кнопка готова – осталось добавить на нее надпись.

Совет 2: Как сделать кнопку

Занявшись созданием собственного сайта, вы непременно столкнетесь с выполнением задачи по созданию кнопок для его разделов. Кнопка – это картинка, щелкая по которой, пользователь переходит на соответствующий раздел сайта. Кнопки можно делать в фотошопе, но не все создатели сайтов могут с этим справиться. Есть в интернете несколько бесплатных сервисов, воспользовавшись которыми, можно без особого труда сделать кнопочки для своего ресурса.
Инструкция
1
В общем, этот процесс выглядит так: заходим на нужный сайт и далее задаем необходимое нам значение нескольким характеристикам кнопки, определяющим ее внешний вид. Каждая «трансформация», которой подвергается кнопка, обычно отображается на самом экране редактирования внешнего вида кнопки.
2
Поле Text. В этом поле нужно ввести надпись, которая будет отображаться на будущей кнопке. Здесь можно выбрать шрифт, эффекты для него (жирность, подчеркивание и так далее), размер, цвет. Можно также сделать текст с тенью от букв или без тени. И, наконец, мы можем выбрать формат, в котором наша кнопка с текстом будет сохранена. Лучше воспользоваться форматом JPG для статичной кнопки или GIF – для анимированной.
3
Переходим к другой части экрана редактирования, где можно кнопку визуально оформить. Первое, что нам нужно будет – это задать форму кнопки (круг, квадрат, прямоугольник и так далее).
4
Далее выбираем обводку для нашей кнопочки. Варианта два: обводка отключена и включена. Выбрав второй вариант, задаем размер и цвет границы.
5
Выбираем тень от кнопки. Опять же, можно ее либо отключить, либо включить, задав при этом цвет тени и ее расстояние от кнопки.
6
Размер кнопки. Он может быть фиксированным и нефиксированным. Во втором случае мы сами выбираем ширину, длину кнопки, расстояние от концов текста до границ кнопки.
7
После всех операций по изменению внешнего вида текста и кнопки можно сохранить готовую кнопочку на компьютере, выбрав нужный формат и имя изображения.
Видео по теме

Совет 3: Как сделать сайт в фотошопе

В фотошопе можно сделать макет сайта, по которому его уже создают в html. Процесс этот относительно несложный.
Вам понадобится
  • Программа Adobe Photoshop
Инструкция
1
Откройте фотошоп и создайте в нем документ размером 1020 на 1200 pic. Установите цвет фона #a8a995. Если сайт будет посвящен какой-либо фирме, то можно поместить ее логотип слева вверху в строке навигации. Оставьте справа место для ссылок для навигации по сайту.
2
Возьмите инструмент Rectangle Tool и создайте прямоугольник 80 на 54 pic в строке навигации по сайту. Он будет обозначать активный пункт меню в навигации по сайту.
3
Зайдите в меню Layer-Layer Style, поставьте там галочку Color Overlay, там же цвет #ADAE9E, Opacity – 100%, и галочку Stroke, там же Size – 1 px, Position – Outside, Opacity – 100%, цвет #CED0BB.
4
Поверх прямоугольника, что у вас уже есть, добавьте еще один с размерами 71 на 50 pic, закрасьте его цветом #cfbe28. Зайдите в меню Layer-Layer Style, выставьте следующие параметры для этого прямоугольника: Drope Shadow: Blend Mode – Multiply, цвет #000000, Opacity – 27%, Angle – 90, Distance – 1, Spread – 0, Size – 5; Inner Shadow: Blend Mode – Multiply, цвет #000000, Opacity – 27%, Angle – 90, Distance – 1, Choke – 0, Size – 18; Stroke: Size – 1, Position – Outside, Opacity – 100, Fill Type – Color, Color #D6C72C.
5
Добавьте тень для ссылок, находящихся в строке навигации. Для этого выделите слой с текстом этих ссылок, зайдите в меню Layer-Layer Style и выставьте следующие параметры: Drope Shadow: Blend Mode – Multiply, цвет #000000, Opacity – 75%, Angle – 90, Distance – 1, Spread – 0, Size – 1. Повторите эти действия с каждым слоем, на которых будет текст ссылок.
6
Теперь нужно сделать ознакомительную часть шаблона. Выберите инструмент Rectangle Tool и сделайте прямоугольник под логотипом, залейте его белым цветом, уменьшите прозрачность до 20%.
7
Выберите инструмент Ellipse Tool и сделайте овал под этим прямоугольником. Зайдите в меню Filter>Blur>Gaussian Blur и поставьте значение радиуса 7,8.
8
Возьмите инструмент Rectangular Marque Tool и выделите нижнюю часть прямоугольника и размытый овал. Удалите ее.
9
После этого впишите текст в прямоугольник-кнопку. Создайте линию прямо над ним со следующими параметрами: 866 на 1 pic.
Видео по теме

Совет 4: Как сделать надпись в фотошопе

Графический редактор Adobe Photoshop, пожалуй, - самая известная на сегодняшний день программа, использующаяся для редактирования растровых изображений. Среди ее пользователей как профессиональные дизайнеры, так и просто любители. Популярностью фотошопа обязан своим широчайшим возможностям, с помощью которых можно творить с изображением настоящие чудеса. В программе имеется мощный инструментарий, позволяющий получать поразительные эффекты.
Инструкция
1
Нажмите на пункт меню Файл, который расположен в левом верхнем углу окна редактора. Нажмите поле «Новый» и задайте параметры нового, вновь создаваемого файла, указав, что его фон будет прозрачным.
2
Слева, на расположенной вертикально панели инструментов, нажмите кнопку, на которой нарисована буква «Т» - это мастер работы с текстом. При активации кнопки сверху появится еще одна панель, на которой можно задать параметры шрифта, которым будет написан текст. Выберете подходящий шрифт, его тип и размер. Если хотите, то множество самых разных дополнительных шрифтов можно скачать и установить из интернета.
3
По щелчку правой кнопки появится прямоугольник, определяющий то место, где будет размещаться текст. Размеры прямоугольника можно подкорректировать по высоте и длине, выделив его угол или сторону и потянув за появившуюся стрелочку.
4
Поместите курсор на поле для текста и вводите тот текст, который необходим. Его положение на листе, центрировку и цвет можно задать при помощи инструментов. Повернув рамку прямоугольника, можно изменить расположение текста и угол его поворота относительно горизонтали.
5
При необходимости, надпись можно деформировать, задав форму и параметры искажения по вертикали и горизонтали.
Полезный совет
Текст может быть сохранен как один из видов кистей и использоваться, например, в качестве вашей фирменной подписи под изображением.
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500