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

Удобный интерфейс, отлично прорисованная графика, правильное расположение элементов на странице – половина успеха сайта у посетителя. Рисование кнопок для сайта – небольшая, но немаловажная часть работы над онлайн-проектом.
Инструкция
1
Попробуйте нарисовать круглую кнопку. Приведенный ниже способ универсален и для создания логотипов, аватарок. Рисовать ее не сложно, несмотря на количество действий, которое вам придется совершить.
2
Откройте программу Adobe Photoshop. Создайте новый документ, нажав комбинацию «Ctrl+N». Параметры изображения 300*300, разрешение 72 пикселя/дюйм. Фон и цветовой режим по умолчанию белый и RGB соответственно.
3
Лучше всего рисовать векторами, чтобы при уменьшении кнопки не ухудшилось ее качество. Выберите инструмент «Овал», зажмите Shift и от центра нарисуйте круг.
4
Теперь к получившемуся кругу примените несколько эффектов. Пройдите в меню «Слои» - «Стиль слоя» - «Параметры наложения». Здесь нужно будет наложить градиент.
5
Далее здесь же поставьте галочку напротив «Тиснение», чтобы придать кнопке необходимую выпуклость, и установите следующие параметры: стиль – обводящее тиснение, метод – мягкая огранка, глубина – 220%, размер – 1 пиксель, смягчение – 5 пикселей, угол – 135о без глобального освещения, высота – 32, режим подсветки – нормальный с непрозрачностью 30% , режим тени – умножение с непрозрачностью 25%
6
Для придания еще большего объема здесь же в параметрах наложения поставьте галочку на «Тень» и установите следующие параметры: режим наложения – умножение, прозрачность – 40%, угол – 125о с использованием глобального освещения, смещение – 5 пикселей, размер – 20 пикселей.
7
Результатом произведенных действий станет такое изображение, как показано на рисунке.
8
Теперь создайте новый слой, вновь выберите «Овал» и нарисуйте круг меньшего радиуса, чем первая фигура. Откройте «Параметры наложения», поставьте галочку напротив «Внутренняя тень» и установите параметры: режим наложения – мягкий свет, угол – 125о, смещение – 0 пикселей, стягивание – 45%, Размер – 21 пиксель.
9
Далее здесь же в параметрах наложения отметьте «Наложение градиента» и создайте градиент с параметрами как на картинке. Нажмите ОК
10
Далее установите стиль наложения – радиальный, масштаб – 124%
11
Теперь поставьте галочку напротив пункта «Обводка» и задайте такие параметры: размер – 5 пикселей, положение – снаружи, режим наложения – нормальный, непрозрачность – 100%, тип обводки – градиент.
12
В итоге этих действий должно получиться нечто, уже более похожее на кнопку. Вы можете вновь открыть параметры наложения и поэкспериментировать с ними.
13
Теперь нужно добавить кнопки бликов, чтобы кнопка обрела стеклянную фактуру. Для этого опять создайте новый слой, выберите инструмент «Овальное выделение», создайте овал над кнопкой и залейте его белым при помощи инструмента «Заливка». Зажмите Ctrl, кликните на слой с цветным кругом, инвертируйте выделение («Выделение» - «Инверсия»). Теперь жмите Delete. Овал должен обрезаться по периметру круга.
14
На панели слоев измените параметр «Обычное» на «Мягкий свет», затем нажмите на значок векторной маски и выберите инструмент «Заливка» - «Градиент». Залейте блик снизу вверх. Кнопка почти готова.
15
Можно на кнопку добавить надпись. К ней также можно применить эффекты наложения, такие как внутреннее, внешнее свечение, градиент и так далее. Не бойтесь экспериментов, чем больше фантазии вы прилагаете в работе, тем быстрее освоите как сам редактор, так и веб-дизайн.

Совет 2: Как нарисовать сайт

В создании веб-сайта очень важен этап отрисовки дизайна страниц, который впоследствии будет сверстан и опубликован в сети. В этой статье вы узнаете, как при помощи Adobe Photoshop нарисовать грамотный макет для сайта, на основе которого вы впоследствии сможете формировать более сложные макеты.
Вам понадобится
  • - программа Adobe Photoshop
Инструкция
1
Создайте в Фотошопе новый файл (Ctrl+N) с размерами 1040х1400, где 1400 – это высота. Включите отображение линеек (Ctrl+R) и установите в настройках линейки пиксели как единицы измерения.
2
Начните вытягивать направляющие так, чтобы они соответствовали границам блоков макета. Боковые границы растяните так, чтобы до краев осталось 40 пикселей. Верхние и нижние границы также должны оставлять по 40 пикселей с каждой стороны до границ фона.
3
Затем выделите направляющую, которая составит ширину верхней шапки – 200 пикселей вниз от верхней границы фона.
4
Чтобы сформировать сайдбары слева и справа макета, установите направляющие на 240 пикселей от границы фона слева, и на 800 справа.
5
Отступите по 5 пикселей внутрь от левого и правого сайдбара и проведите еще две вертикальных направляющих. Затем проведите еще две направляющих на 245 пикселей слева и на 795 справа.
6
Теперь отмерьте от границы шапки 30 пикселей и проведите горизонтальную направляющую для горизонтального меню.
7
Выделите прямоугольным выделением с помощью клавиши М узкую область горизонтального меню, которую вы только что наметили. Выберите инструмент заливки и залейте область нейтральным светло-серым цветом.
8
Выберите инструмент заливки и залейте область нейтральным светло-серым цветом. Нажмите в меню «Выделение-Модификация-Сжатие», укажите параметр в 1 пиксель и нажмите «ОК». Залейте область более светлым оттенком серого – у вас появится рамка меню.
9
Создайте новый слой и выберите подходящее изображение для иконки или логотипа сайта, а затем откройте его.
10
Вставьте на новом слое в шапку изображение, разместив его с левого края. Правее изображения впишите с помощью любого шрифта текстовый заголовок сайта.
11
Блоки сайта оформляйте в той же цветовой гамме, что и только что созданная шапка. Выделите область левого сайдбара и проведите с ней те же операции по заливке двумя цветами, как с блоком меню.
12
То же самое сделайте с центральным широким блоком контента. Скопируйте слой с левым сайдбаром и поместите его в качестве правого сайдбара.
13
Добавьте текст на свой макет – выберите нейтральный шрифт и впишите заголовки меню, примеры новостей, фотографии, раздел тегов и ссылок.
14
Закончите оформление макета созданием «подвала» или футера – пропишите там копирайты и свои контакты.
Видео по теме
Видео по теме
Обратите внимание
Как нарисовать макет сайта. Приступим к рисованию макета будущего сайта. Буду рисовать конечно несложный макет, так сказать theme framework — минимальный дизайн, но при помощи которого можно сделать вполне приличный и насыщенный дизайн сайта.
Полезный совет
Как нарисовать макет для сайта в Photoshop. Прежде чем приступить к работе, нужно определиться со структурой.
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500