Недавно я прочитал статью Скотта Льюиса, который является профессиональным дизайнером иконок Iconfinder.com . Скотт получил степень в области графического дизайна в Университете Восточной Каролины и разрабатывает иконки более 25 лет.
Меня заинтересовали его советы по созданию иконки, а также его подход.
Это были три основные составляющие эффективного дизайна иконок. Далее мы детально рассмотрим шесть шагов для решения этих задач.
Сетка нужна лишь для того, чтобы помочь вам сделать значки ровными и последовательными, но если перед вами стоит выбор между тем, чтобы сделать значок красивым или нарушить правила, то нарушайте – но делайте это очень аккуратно.
Однако замечу, что сглаживание становится менее актуальным при больших размерах и на экранах с высоким разрешением, таких как retina дисплей.
Используйте детали и украшения очень аккуратно. Иконка должна быстро сообщать об объекте, идеи или действии. Слишком много маленьких деталей сделают изображение сложным и соответственно менее узнаваемым, особенно при меньших размерах.
Уровень детализации в одной иконке или наборе иконок такой же важный аспект эстетического единства и узнаваемости. Главное правило – минимум деталей, необходимых для передачи смысла иконки.
Все эти простые шаги следует рассматривать как отправную точку, а не как окончательное руководство. После освоения теоретических и технических основ, вы сможете сосредоточить свою энергию на том, чтобы создавать уникальные иконки, которые будут выделяться на общем фоне, благодаря вашему творческому видению.
Сет иконок, которые были использованы на
В этом уроке мы узнаем, как нарисовать красивую иконку телевизора в Adobe Photoshop.
Создайте новый документ (File > New) с показанными настройками
Залейте фон #FFFFFF цветом, а затем примените к нему следующие Эффекты слоя .
Используйте с радиусом 35px BODY , откройте Стили Слоя и примените следующие настройки.
Также добавьте Обводку с слою BODY со следующими настройками
Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px и создайте прямоугольник любого цвета. Назовите этот слой BODY_2 и после этого примените на этот слой следующие эффекты.
Также добавьте Обводку к слою BODY_2 со следующими настройками.
После этого добавьте Внутреннею тень к слою BODY_2 со следующими настройками.
Вы должны получить похожий результат.
BODY . Назовите этот слоя BASE . Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px
Для этого выберите слой BODY нажмите правой кнопкой мыши и выберите Скопировать стиль слоя и затем выберете слой Base нажмите на правую кнопку мыши и выберете Вставить стиль слоя .
После этого необходимо исправить толщину Обводки на 3px в слое BASE.
Вы должны получить похожий результат.
Создайте новый слой и поместите его под слой BODY . Назовите этот слой FOOT . Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px и затем примените к нему следующие эффекты слоя.
Примените также Внутреннюю тень к слою FOOT.
Вы должны получить похожий результат.
Теперь продублируйте слой FOOT
и поместите его как показано на рисунке.
Создайте новый слой, назовите его GLOSSY и поместите его поверх всех слоев, затем выберите инструмент Кисть (B) и большой кистью с мягкими краями поставьте одно белое пятно.
Затем поменяйте Режим наложения на Перекрытие с уменьшите Прозрачность на 50%
Создайте новый слой назовите его SCREEN и поместите поверх всех слоев.
Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px , чтобы создать прямоугольник. Затем скопируйте Стиль слоя BODY_2 и примените его к слою SCREEN . Теперь исправьте толщину обводки на 10px в слое SCREEN .
Вы должны получить похожий результат.
В этом шаге мы сделаем сам экран. Создайте новый слой SCREEN_2 . Поместите его поверх остальных слоев. Используйте инструмент Прямоугольник со скругленными углами (U) с радиусом 35px , чтобы создать прямоугольник. Затем примените Градиент в Стилях Слоя со следующими настройками.
Затем примените Внутреннюю тень к слою SCREEN_2 .
Затем примените Внутреннее свечение к слою SCREEN_2 .
Затем Тень к слою SCREEN_2 .
Вы должны получить похожий результат.
Создаем новый слой и называем его SCREEN GLOSSY и помещаем его поверх остальных. Затем выбираем инструмент Перо (P) и рисуем контур как показано на рисунке. И заливаем его белым цветом #FFFFFF . Затем уменьшаем прозрачность до 20%
Создаем новый слой, называем его LIGHT DOT и помещаем поверх остальных слоем. После этого выбираем инструмент Кисть (B) и большим размером кисти, с мягкими краями ставим по центру экрана одно большое белое пятно.
В этом шаге вы сделаем кнопки. Возьмите инструмент Эллипс (U) и создайте круг и поместите его примерно так как на картинке, назовите этот слой BUTTON .
Теперь вернитесь к слою BODY_2 и скопируйте его Стиль слоя нажав по нему правой кнопкой и выбрав Скопировать стиль слоя . После этого примените скопированный стиль на слой BUTTON .
После этого мы применяем Стиль слоя как показано на картинке, к нашей копии круга.
Затем добавляем Тень .
Вы должны получить похожий результат.
Повторяем ранние шаги и применяем Стили слоя к прямоугольнику, но немного модифицируем настройки Тени .
Вы должны получить похожий результат.
Мы дублируем слой BUTTON помещаем его под первой кнопкой, затем немного поворачиваем его. Также редактируем Стиль слоя Градиент второй кнопки.
Теперь наши кнопки готовы.
Результат должен быть как на картинке.
Сделаем динамик. Нам надо создать прямоугольник со скругленными углами под кнопками, как на рисунке. Назовем этот слой SPEAKER .
Теперь откроем Стиль слоя и применим следующие настройки.
Применим Внутреннюю тень к слою SPEAKER.
Добавим Обводку к слою SPEAKER .
В этом уроке мы будем учиться рисовать значки из игры Warface. Первый будет логотип самой игры, второй значок за достижения.
1.Вот логотип. Да, еще, кто не в курсе, картинки увеличиваются.
Надо нарисовать прямоугольник. Делаем так: рисуем прямую, делим ее пополам(опускаем вниз вертикальную линию), вниз от крайних точек отмеряем эту половину и чуть-чуть еще, проводим горизонтальную прямую, потом отступаем еще — это будет середина прямоугольника(отмечена маленькой прямой). Две прямые рисуете на глаз(я имею отступ от верха и низа прямоугольника соответственно), однако расстояние от середины справа и слева должны быть одинаковы. Можете всего этого не делать, а нарисовать на глаз.
Рисуем срединную часть, диагональные линии сбоку, они нам понадобятся для дальнейшей прорисовке.
Стираем все вспомогательные прямые, оставив только по середине, рисуем дальше.
Примитивно можно закрасить значок таким образом.
2.Значок, его разрешение очень небольшое. Хотела сделать несколько значков, но они такие маленькие, очень трудно разглядеть детали, так что имеем, что имеем. Начнем.
Нарисуйте окружность и направляющие, затем форму головы. Линии у льва грубые и прямые. Нарисуйте черты лица и сотрите круг.
Рисуем зубы, язык и прямые, которые отходят от головы.
Рисуем гриву, если нарисованы тонкие линии, то тоже рисуете еле видно.
Мастер-класс "Создание эмблем для команд в программе PowerPoint2010"
Автор Ростова Наталья Сергеевна, воспитатель I категории, МБДОУ «Детский сад №155», г. Нижний Новгород.Ход создания:
Открыть программу PowerPoint2010 и создать пустой слайд.
Эмблема будет круглой, поэтому на вкладке Вставить выбираем Фигуры - Овал.
Надпись в эмблеме должна располагаться по кругу, поэтому выбираем вкладку Вставить- Надпись. Затем щелкаем на фигуре и выбираем вкладку Средства рисования - Текстовые эффекты - Преобразовать -Траектория движения - Дуга вверх.
Иконка Home
Чтобы четко видеть формы, которые мы рисуем, я буду использовать черную заливку. Итак с помощью инструмента Pen Tool (K) рисуем основу для иконки Home.
Далее, чтобы придать нужный цвет и контур идем в меню Layer > Layer Style > eae6c9
до цвета cbcfba
После, чтобы форма была в будущем контрастной мы присвоим этой форме контур. Для этого идем в меню Layer > Layer Style > Stroke… и делаем линию толщиной 1 пиксель и с цветом 868686
Вот что у нас должно получиться
Теперь с помощью того же инструмента Pen Tool (K) рисуем основу для крыши
Теперь придадим ей нужный цвет - идем в меню Layer > Layer Style > Gradient Overlay… и делаем градиентную заливку от цвета b06a00
до цвета 8c4d00
.
Получаем вот такой результат
Ну вот, уже кое-какие очертания у нас появились, теперь будем дополнять нашу форму деталями – с помощью инструмента Rectange Tool (U) рисуем трубу
Назначаем на трубу градиентную заливку от цвета eae6c9
до цвета cbcfba
, только градиент на этот раз направляем горизонтально
Как и ранее, добавляем контур толщиной 1 пиксель и с цветом 868686
Получаем…
Теперь прячем трубу на задний план, и с помощью инструмента Rectange Tool (U) рисуем еще один элемент крыши
Назначаем градиент от цвета ce9128
до цвета b06a00
…
… и добавляем контур толщиной 1 пиксель и с цветом a86600
Смотрим…
Прячем готовый элемент так же как и трубу на задний план, и опять же с помощью инструмента Rectange Tool (U) рисуем дверь
И выполняем уже знакомую нам операцию с градиентом от цвета b06a00
до цвета cd9128
… и не забываем про линию… толщина 1 пиксель, цвет a75700
Смотрим результат…
Получился, вполне симпатичный домик, но мы продолжим наполнять нашу иконку деталями – жмем Rectange Tool (U) и рисуем чердачное окно
Ну, и, опять же, градиент – с цвета 2e8ce0
до цвета 7cc6fd
Назначаем контур толщиной в 1 пиксель, и цветом 4381c8
Оцениваем результат…
Наш домик почти готов, но он смотрится слишком плоским – будем добавлять объем с помощью бликов.
Создаем новый слой, и с помощью инструмента Pencil (B) рисуем две линии
Идем в меню Layer > Layer Style > Gradient Overlay… и делаем градиентную заливку от цвета 000000
до цвета ffffff
. Обратите внимание на параметр Blend Mode – я поставил значение Screen
Должен получиться следующий результат
Для того чтобы добиться нужного нам эффекта, нужно к слою применить следующие манипуляции
В результате, мы получаем вот такой эффект
Теперь сделаем блик под крышей. Создаем новый слой, и с помощью того же инструмента Pencil (B) рисуем следующее
Так как градиент у нас на этом объекте будет точно такой как и на прошлом, то имеет смысл сэкономить время и просто скопировать стиль со слоя, который мы сделали до этого. Чтобы скопировать стиль, жмем правой кнопкой мыши на слое с первыми бликами и в выпадающем меню выбираем Copy Layer Style. Теперь жмем так же правой кнопкой мыши на слой с бликом под крышей, и в меню выбираем Paste Layer Style. Таким образом мы скопировали стиль с черно-белым градиентом – осталось произвести манипуляции с самим слоем
Результат будет следующим
Продолжаем добавлять блики. Хочу заметить что каждый блик должен быть на отдельном слое, так будет легче манипулировать со стилями… Рисуем еще четыре блика – каждый в отдельном слое
Предлагаю сэкономить время – копируем стиль со слоя, на котором мы делали первый блик. Далее, назначаем на скопированный стиль на каждый из последних четырех слоев. Так же для каждого слоя производим соответствующие манипуляции
В результате у нас должно получиться следующее
На этом этапе домик смотрится завершенным, но я все же позволю себе нанести последние штрихи, подчеркнув фундамент. Для этого с помощью инструмента Pencil (B), выбрав цвет f3f3ea
, рисуем следующее
Почти готово. Ниже добавим еще одну линию только с цветом b5b8a3
.
Осталось нашему домику добавить тень. Для этого выделяем все слои, и группируем их в одну группу – это будет наш исходник. Далее делаем копию группы, и в этой копии сжимаем все слои в один – идем в меню Layers > Merge Layers (Ctrl + E). Это будет слой к которому мы применим тень, а наш исходник мы сделаем невидимым
Далее идем в меню Layer > Layer Style > Drop Shadow… и назначаем тень со следующими параметрами
И, в итоге получаем готовую к использованию иконку!
Надеюсь, мой урок был вам полезен.