Совет 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%. Ваша кнопка готова – осталось добавить на нее надпись.
Ваши деньги должны работать на вас!
вклад на выгодных условиях
Стабильный доход и уверенность в завтрашнем дне - это то, что вы получите, сделав вклад на самых выгодных для себя условиях.
Возможность вернуть до 260 000 рублей
Если вы решили взять ипотеку
Каждый россиянин имеет право вернуть часть уплаченных налогов за покупку жилья.
Карта с большими бонусами
Дебетовая карта
Возвращается до 10% от стоимости покупок. Выгодна при крупных тратах.
Настроить автоплатежи просто
настройка автоплатежей за пару минут
В мобильном приложении Сбербанка все ваши платежи будут происходить в срок и без вашего участия.

Совет 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