Уроки фотошопа графика

Главное меню

Регистрация / Вход

Помощь сайту

Понравился сайт? Внесите вклад в его развитие, пожертвовав любую сумму на один из кошельков или отправив SMS:

R131473649041

Z558546585090

410011044538287

Отправить SMS

(от 5 руб.)

Деньги пойдут на оплату серверов и на развитие сайта.

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

Администрация сайта.

Пользователи, внесшие вклад

Кто на сайте

Сейчас 10183 гостей и 19 пользователей онлайн

natalivesna
oleg23021978
svi1973
Tysik
esyr29
Melissa_tm
dps
smile
Татьяна
Gena
volvo850
admin777

Joomla Templates

Hosting services

Главная

Уроки фотошопа графика

Ни одна современная веб-страница не может обойтись без графического оформления. И чем оно эффектнее, тем больше популярность сайта.

Графические элементы представляют собой набор средств, с помощью которых посетитель веб-страницы может без труда и особых знаний перемещаться по сайту. Кроме того эти элементы придают сайту особую неповторимость и отличие от других веб-страниц.

Думаете делать графику для сайта в Photoshop сложно? Вовсе нет!
В рубрике Уроки фотошопа графика Вы узнаете, как всего за пару действий можно создать привлекательные кнопочки для сайта, которые откровенно будут заманивать ваших посетителей кликнуть по ним.
Кроме того, вы научитесь делать удобные навигационные панели, хедеры для сайта и многое другое.

Создание объёмной кнопки для сайта

Работа с фотошопом - Уроки фотошопа графика
Автор: NON
28.03.2010 22:40
Создание объёмной кнопки для сайта В этом уроке по работе с фотошопом я покажу как можно создать красивую объёмную кнопку для сайта. Один из вариантов создания похожей кнопки я уже рассматривал в уроке под названием: "". Откроем новый документ: "Файл - Новый" или просто нажмём Ctrl+N. В окне документа установим параметры, указанные на рисунке. В дальнейшем размер кнопки можно будет уменьшить. Установим цвет переднего плана чёрный. Для этого достаточно нажать клавишу D. Выберем инструмент "Заливка" (G). Щёлкнем по нашему документу и он окрасится в чёрный цвет. Создадим новый слой. Для этого щёлкнем по второй справа иконке в палитре "Слои". Выберем инструмент "Овальная область" (M). Нажмём и удерживаем клавиши Alt и Shift, наведём курсор на центр нашего слоя, щёлкнем левой кнопкой мыши и создадим круглое выделение, расположенное по центру нашего изображения. Зальём наше выделение любым цветом, отличным от чёрного. Для этого щёлкаем по иконке цвета переднего плана и в окне выбора цвета устанавливаем необходимый цвет, к примеру зелёный. Выбираем инструмент "Заливка" (G) и щёлкаем им по нашему выделению. Оно окрасится в зелёный цвет. Придадим верхнему слою некоторые стили. Для этого щёлкаем по второй слева иконке fx в палитре "Слои" и в раскрывшемся списке выбираем "Внутренняя тень". В окне "Стиль слоя" я поставил значения, которые Вы видите на рисунке. Вы конечно можете выбрать свои параметры. Переходим к параметру "Внутренне свечение". Я установил вот такие значения. Вы, как всегда, вольны выбрать то, что Вам нравится. Выбираем "Глянец" и устанавливаем такие параметры, чтобы кнопка выглядела объёмной. Нажимаем "Да". Придадим ещё большую объёмность нашей кнопке. Для этого идём по такому пути. Создаём новый слой - Ctrl+N. Устанавливаем цвет перднего плана белый. Для этого вначале нажимаем D (цвета переднего и изаднего плана установились по умолчанию, т.е. цвет перднего плана чёрный, а заднего - белый), а затем X (цвета переденго и заднего цветов поменялись местами). Выбираем инструмент "Градиент" (G). Щёлкнув по окошку градиента, выбираем градиент от цвета переднего плана к прозрачности, градиент - линейный. Проводим нашим градиентом сверху вниз. Вот что у нас получилось. Снимаем выделение - Ctrl+D. Применяем инструмент трансформирования - Ctrl+T. Нижний центральный маркер двигаем вверх. Левый и правый центральные маркеры двигаем вправо и влево соответственно. Поворачиваем рамку трансформации по часовой стрелке. Перемещаем рамку в верхний правый угол. Нажимаем Enter. Дублируем верхний слой, просто перетащив его на вторую справа иконку "Создать новый слой" палитры "Слои". Идём в "Редактирование - Трансформирование - Отразить по горизонтали". Точно также отражаем по вертикали и перетаскиваем с помощью инструмента "Перемещение" (V) наш блик в нижний левый противоположный угол. У нас остался активным верхний слой. Нажимаем сочетание клавиш Ctrl+E и наши два слоя с бликами объединятся. Выбираем "Фильтр - Размытие - Размытие по Гауссу". В окне фильтра примерно устанавливаем такой радиус размытия. Переходим на слой с зелёной кнопкой и устанавливаем параметр "Заливка" для этого слоя равным нулю. Переходим на верхний слой и создаём новый слой - Ctrl+N. Выбираем, к примеру, синий цвет и заливаем им, с помощью инструмента "Заливка" (G) наш верхний слой. Всё точно также, как и описывалось выше. Выберем инструмент "Горизонтальный текст" и что-нибудь напишем. Объединим текстовый слой и "Слой 3" - Ctrl+E. Перетащим наш объединённый слой под слой с кнопкой и инструментом "Перемещение" (V), разместим нашу надпись по центру кнопки. Щёлкнем левой кнопкой мыши по зелёной кнопке (Слой 1) и наша кнопка выделится. Нажмём сочетание клавиш Shift+Ctrl+I и наше выделение инвертируется. Нажимаем кнопку Delete и снимаем выделение - Ctrl+D. Наша кнопка готова! В этом уроке по работе с фотошопом я покажу как можно создать красивую объёмную кнопку для сайта. Один из вариантов создания похожей кнопки я уже рассматривал в уроке под названием: "Создание круглой кнопки для Вашего сайта". Наверх Tags: графика кнопки работа с фотошопом сайт Оставить комментарий (3 Комментария)
Подробнее...

Создание круглой кнопки для Вашего сайта

Работа с фотошопом - Уроки фотошопа графика
Автор: NON
19.03.2010 23:12
Создание круглой кнопки для Вашего сайта В этом уроке по работе с фотошопом я покажу простой способ создания круглой кнопки для Вашего сайта. Создадим новый документ - "Файл - Новый" или просто нажмём Ctrl+N. В окне нового документа выберем примерно такие параметры, которые указаны на рисунке. Нажмём "Да". Появится новый документ. Выберем инструмент "Овальная область". Установим параметры: заданный размер и ширину и высоту поставим по 80 пикселов. Чтобы получился круг, удерживаем клавишу Shift и проводим по нашему документу. Появляется выделение в виде круга. Выбираем инструмент "Градиент" (G), щёлкаем по полю градиента для его редактирования. В окошке "Редактор градиента" щёлкаем по нижним маркерам (поочерёдно), потом по полю "Цвет" и в окне "Выберите цвет" подбираем необходимые нам цвета для левого и правого маркеров градиента. Я остановился на таких, а Вы можете подобрать цвета более подходящие для дизайна Вашего сайта. В окне "Редактор градиентов" нажимаем "Да". Проводим градиентом под углом 45 градусов по нашему выделению. Получился вот такой градиентный переход. Опять выбираем инструмент "Овальная область", с теми же параметрами, за исключением высоты и ширины - устанавливаем по 60 пикселов. Удерживаем клавишу Shift, создаём новое выделение и размещаем его по центру нашей картинки. Опять выбираем тот же самый градиент. Проводим градиентом по нашему выделению под углом в 45 градусов, но уже в другую сторону. Вот что у нас получилось. Снимаем выделение - Ctrl+D. Что-нибудь напишем, к примеру цифру 1. Придайте ей любые эффекты, я добавил тень, тиснение и наложение цвета. А Вы вольны выбрать что Вам понравится. Если кто забыл, эффекты добавляются щелчком по второй слева иконке fх в палитре "Слои". Все предыдущие скриншоты экрана я делал при увеличенном масштабе, чтобы можно было понять как применять те или иные инструменты. А теперь посмотрите как выглядит наша кнопка при 100% просмотре. В этом уроке по работе с фотошопом я покажу простой способ создания круглой кнопки для Вашего сайта. Наверх Tags: градиент графика кнопки работа с фотошопом сайт Оставить комментарий (3 Комментария)
Подробнее...

Создаём красивую градиентную пластиковую кнопку для Вашего сайта

Работа с фотошопом - Уроки фотошопа графика
Автор: Евгений Попов
18.03.2010 17:26
Создаём красивую градиентную пластиковую кнопку для Вашего сайта В этом уроке по работе с фотошопом я покажу как создать красивую пластиковую градиентную кнопку для Вашего сайта. Откроем новый документ - "Файл - Новый" или просто нажмём Ctrl+N. В окошке "Новый" выберем параметры, показанные на рисунке и нажмём "Да". Появится окошко "Без имени-1". Выберем инструмент "Прямоугольник со спрямлёнными углами". На панели выберем параметры, указанные на рисунке. В окне нового документа нарисуем прямоугольник со спрямлёнными углами. В палитре "Слои" появится новый слой с векторной маской. Добавим стиль слоя - нажмём в палитре "Слои" на иконку "fх" и в появившемся меню выберите "Тень". В появившемся диалоговом окне "Стиль слоя" вы берите параметры, на которые указывают стрелки, остальные параметры остаются по умолчанию. Выберем "Внутреннюю тень" и установим параметры, которые показаны на рисунке. Выберем "Внешнее свечение" и установим параметры, которые показаны на рисунке. Выберем "Наложение градиента". Изменим градиент, установленный по умолчанию. Для этого щёлкнем по градиенту. Щёлкнем по левому нижнему маркеру, потом по окну выбора цвета. В окне "Выберите цвет" устанавливаем цвет - 0D4496. Нажимаем "Да". Щёлкнем по правомунижнему маркеру, выберем цвет - 4c90f6. Вот такой у нас получился градиент. В окне "Установки" нажимаем "Да". В окне "Стиль слоя" нажимаем "Да". Наша кнопка практически готова. Выделим кнопку. Для этого нажимаем Alt и щёлкаем по миниатюре слоя. Наша кнопка выделилась. Выберем инструмент "Овальная область" и режим "Вычитание", как показано на рисунке. Проведём "Овальной областью" по нашей кнопке, тем самым наполовину уменьшим наше выделение. Вот такое выделение у нас получилось. Создадим новый слой - щёлкнем по второй справа иконке в палитре "Слои". Выберем инструмент "Заливка" (G). Основной цвет установим белый. Щёлкнем заливкой по выделенной области, она зальётся белым цветом. Снимаем выделение - Ctrl+D. Уменьшим непрозрачность верхнего слоя примерно до 7%. Вот такая симпатичная пластиковая или градиентная кнопочка у нас получилась. Выберем инструмент "Текст" (Т) и напишем необходимое нам слово, к примеру - скачать. Уменьшим непрозрачность текстового слоя примерно до 80%. Сольём все слои - Shift+Ctrl+E. Теперь создадим отдельный jpg-файл для нашей кнопки. Для этого выберем "Прямоугольное выделение" и выделим нашу кнопку. Скопируем наше выделение - Ctrl+C. Создадим новый документ - "Файл - Новый" или просто нажмём Ctrl+N. Появится окно "Новый". Так как мы скопировали нашу кнопку в буфер обмена, то программа автоматически установит параметры скопированной области в новом документе. Поэтому в окне "Новый" мы просто нажимаем "Да". Вставляем нашу кнопку в новый документ "Безимени-2" - Ctrl+V. Вот так, в ходе обработки фотографии в фотошопе, мы создали красивую пластиковую градиентную кнопочку. В этом уроке по работе с фотошопом я покажу как создать красивую пластиковую градиентную кнопку для Вашего сайта. Наверх Tags: выделение графика кнопки работа с фотошопом сайт текст Оставить комментарий (10 Комментариев)
Обновлено 18.03.2010 17:56
Подробнее...

Продвижение сайта в Интернете Кнопки для сайта

Работа с фотошопом - Уроки фотошопа графика
Автор: Найкрис Кроули
13.12.2009 14:34
Вот такие интересные кнопки: Наверх Tags: кнопки Оставить комментарий (1 Комментарий)
Обновлено 30.08.2010 19:07
Подробнее...

Хедер для сайта

Работа с фотошопом - Уроки фотошопа графика
11.12.2009 17:43
Оригинальная шапка (хедер) для Вашего сайта: Наверх Tags: хедер Оставить комментарий (3 Комментария)
Обновлено 27.08.2010 18:02
Подробнее...

Создание иконок для сайта

Работа с фотошопом - Уроки фотошопа графика
11.12.2009 17:39
Интересные иконки для Вашего сайта: Наверх Tags: иконки Оставить комментарий (0 Комментариев)
Обновлено 17.02.2011 16:24
Смотреть подробнее урок по работе с фотошопом "Создание иконок для сайта"

Простейший логотип

Работа с фотошопом - Уроки фотошопа графика
11.12.2009 17:22
Простой, но интересный логотип: Наверх Tags: логотип Оставить комментарий (0 Комментариев)
Обновлено 16.03.2011 21:52
Подробнее...

Создание радужного логотипа

Работа с фотошопом - Уроки фотошопа графика
11.12.2009 16:42
Вот такой простой и в то же время интересный логотип получился у нас: Наверх Tags: логотип Оставить комментарий (6 Комментариев)
Обновлено 14.02.2011 11:21
Подробнее...

<< Первая < Предыдущая 1 2 Следующая > Последняя >>

JPAGE_CURRENT_OF_TOTAL

Что в сундучке?

Уроков - 484
Программ - 6
Статей - 29
Советов - 59
Шаблонов, обоев и клипартов - 220
Наборов кистей - 194
Календарей - 32
Рамок - 111
Книг - 14
Текстур и фонов - 15
Наборов иконок - 22
Наборов логотипов - 3
Видеоуроков - 315
Стилей - 8
Шрифтов - 77
Журналов Фотомастерская - 21

Наша RSS лента

Подпишитесь