Beauty – ретушь для начинающих при помощи Photoshop.

Beauty – ретушь для начинающих при помощи Photoshop.

Эффект голограммы на фотографии.

Эффект голограммы на фотографии.

Создание портрета при помощи шрифтов.

Создание портрета при помощи шрифтов.

Создаем красивую оригинальную шапку для блога.

Создаем красивую оригинальную шапку для блога.

Необычный эффект глаз при помощи Photoshop.

Необычный эффект глаз при помощи Photoshop.

Создаем макет сайта о звездах и знаменитостях.

Создаем макет сайта о звездах и знаменитостях.

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию футуристического логотипа в фотошоп.

Урок по созданию футуристического логотипа в фотошоп.

Создаем дизайн телефона на Android в Photoshop.

Создаем дизайн телефона на Android в Photoshop.

Создание макета сайта в стиле минимализма.

Создание макета сайта в стиле минимализма.

Как создать пиксельную кнопку в фотошопе

Как создать пиксельную кнопку в фотошопе

Создаем макет сайта для службы знакомств.

Создаем макет сайта для службы знакомств.

Создание RSS иконки.

Создание RSS иконки.

Урок по созданию простого  и современного  макета для сайта.

Урок по созданию простого и современного макета для сайта.

Графика для сайта.  Рисуем иконку на сайт.

Графика для сайта. Рисуем иконку на сайт.

Урок по созданию зимнего текста.

Урок по созданию зимнего текста.

Урок по созданию красивого новогоднего макета в фотошоп.

Урок по созданию красивого новогоднего макета в фотошоп.

Псевдо HDR.

Псевдо HDR.

Как создать основу для рекламы профессиональной косметики для волос.

Как создать основу для рекламы профессиональной косметики для волос.

Создание эффекта рисунка на фотографии.

Создание эффекта рисунка на фотографии.

Создаем макет сайта, продающий програмное обеспечение.

Создаем макет сайта, продающий програмное обеспечение.

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

Урок по созданию макета сайта для гостиниц и ресторанов.

Урок по созданию макета сайта для гостиниц и ресторанов.

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию яркого красочного дизайна сайта.

Урок по созданию яркого красочного дизайна сайта.

Создание простого и стильного макета сайта.

Создание простого и стильного макета сайта.

Создаем макет блога в фотошоп.

Создаем макет блога в фотошоп.

Создаем оригинальный чистый стиль для сайта.

Создаем оригинальный чистый стиль для сайта.

Создаем профессиональную панель навигации для сайта.

Создаем профессиональную панель навигации для сайта.

Рисуем милую девчушку-смайл.

Рисуем милую девчушку-смайл.

Урок по рисованию прохлаждающегося солнца.

Урок по рисованию прохлаждающегося солнца.

Фантастический эффект фотографии.

Фантастический эффект фотографии.

Создание приятного макета сайта портфолио.

Создание приятного макета сайта портфолио.

Создание макета сайта для портфолио в стиле Веб 2.0

Создание макета сайта для портфолио в стиле Веб 2.0

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок рисования реалистичного динамика.

Урок рисования реалистичного динамика.

Создаем стильный коллаж.

Создаем стильный коллаж.

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок создание эффекта металлического текста

Урок создание эффекта металлического текста

Небесный коллаж

Небесный коллаж

Графика для сайта. Рисуем иконку на сайт.

Tags: Графика для сайта | Дизайн/Рисование

В этом  уроке  можно подробно узнать, как можно создать иконку на сайт. Для этого мы будем использовать различные градиенты , стили  и тени для получения наилучшего результата.
Значок мы будем создавать в наибольшем необходимом размере это 256*256 пикселей.  Применять будем наложение монохромных градиентов.

 


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


Далее на новом слое загружаем выделение своего изображения, нажав правой кнопкой мыши на эскизе  слоя зажав при этом клавишу Ctrl. Уменьшаем данное выделение примерно на 1 пиксель и на новом слое заливаем его черным цветом.


Добавляем к новому слою наложение градиента  от темно – серого к черному .


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


Далее загрузите выделение  последнего слоя и заполните его одним из повторяющихся узоров. Загрузить набор пиксельных узоров.


Измените режим наложения на Умножение и уменьшите прозрачность слоя до 25%.


Далее создаем другое круглое выделение  в форме кольца для создания калибровочной шкалы. Для этого на новом слое создайте круг, залейте его любым цветом, затем внутри этого круга создайте выделение, которое будет меньше по диаметру  и нажмите кнопку Удалить, получив при этом форму кольца, как показано на рисунке.  Создайте квадратное  выделение, щелкните правой кнопкой мыши и выберите из меню Свободное трансформирование. Переверните квадрат вниз ,зажав при трансформировании клавишу  Shift.  Поместите его вниз так, чтобы его верхняя точка была совмещена с центром нашей иконки. Удалите ненужную область il viagra.


Добавляем нашему слою наложение градиента , используя при этом градиент цветов радуги, убедитесь что стиль градиента выбран спектральный. Используйте градиент от синего с красному. Добавьте внутреннюю тень, чтобы придать объём верхней части нашей шкалы.


В центре иконки создайте маленький круг, добавьте ему эффект металла , применив наложение градиента, и тонких теней.


С помощью инструмента полигональное лассо создайте стрелочку . Добавьте к ней градиент с использованием светлых и темных красных оттенков.


Мы создали большой вариант иконки. Но далеко не всегда на сайтах применяется иконка такого размера как эта.

  Теперь мы уменьшим и создадим уменьшенный вариант иконки.


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


Такие эффекты как градиент нуждается в корректировке, поэтому  зайдите в меню и измените настройки стиля слоя под каждый размер индивидуально.


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

Вот что получилось в итоге:

Источник.

AddThis Social Bookmark Button
 

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


Защитный код
Обновить

поиск
RSS
Определение ключевых слов.

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

кол-во просмотров17411
Подробнее...

Что такое карта сайта?

  Карта сайта представляет собой некое подобие содержания книги. Иными словами карта сайта это страница, на которой размещены все ссылки, разделы...

кол-во просмотров10856
Подробнее...

Что такое хороший дизайн.

Много думала дизайнерская элита со всего света, что же такое хороший дизайн? Долго они думали думали и пришли к выводу...

кол-во просмотров8380
Подробнее...

Стили сайтов. Американский бизнес стиль.

    Если посмотреть на американские деловые сайты, то можно обратить внимание, что многие сайты, созданные для продажи товаров или услуг...

кол-во просмотров12581
Подробнее...

Когда нам флеш необходим?

     Флеш технологии используются в тех случаях, когда необходимо создать нечто оригинальное и совершенно необычное по внешнему виду и по...

кол-во просмотров8498
Подробнее...