Рисуем иконку twitter в фотошопе

Апрель 26, 2013   Александр Маврин   8 комментариев

Иконка twitterЗдравствуйте, уважаемые читатели. Давайте-ка мы с вами попробуем нарисовать иконку twitter в фотошопе. Получится вот такая иконка, как здесь слева. Для того, чтобы процесс создания иконки был достаточно быстрым, нам понадобятся кое-какие дополнительные материалы, как и при создании визитки в фотошопе. Во-первых это стили. Это могут быть web 2.0 стили для фотошопа или любые другие, которые вам по вкусу. Во-вторых — изображение птички твиттера. Но это не обязательно. Можно просто написать букву «t» и красиво ее стилизовать теми же стилями.

Итак, давайте откроем фотошоп и создадим новый документ Ctrl + N с белым фоном. Размер значения не имеет, главное, чтобы он был больше, чем 100×100 пикселей. Версия редактора тоже не имеет никакого значения. Я использую CS6 русской версии, но получится должно и в любом другом. Выбираем инструмент Прямоугольник со скругленными углами, устанавливаем размер 100×100 пикселей и радиусом скругления углов 10 пикселей. Цвет прямоугольника пока не важен. Получится должно примерно так:Прямоугольник со скругленными углами

Теперь внимание! Выбираем инструмент Редактирование — Трансформирование контура — Наклон и немного наклонить оба правых угла вниз, чтобы в итоге получилась вот такая фигура:Параллелепипедтеперь зажимаем Ctrl + Alt и нажимаем поочередно клавиши и  ровно 10 раз. По 5 раз влево и 5 раз вверх. Таким образом у нас созданы 10 копий фигуры со смещением вправо и вверх. Идем в слои и самую нижнюю фигуру-оригинал переименовываем для удобства и перемещаем на самый верх. Теперь самое время применить к верхнему слою стили. Вы можете выбрать любой, но я выбрал синий с градиентом. 🙂 Ромбик

Далее отключаем верхний слой и фон и объединяем все видимые копии слоев. Включаем верхний слой и фон. Теперь нажимаем на объединенные копии слоев 2 раза мышкой, чтобы перейти  в параметры наложения и выбираем наложение градиента. И устанавливаем такие параметры с цветом по обоим сторонам #024264, а в середине #ffffff и углом наклона примерно в 123°. Непрозрачность 100% и масштаб примерно 45%. Делаем прозрачность слоя 80%.Градиент в фотошопе

Рисование иконки twitter в фотошопе подходит к концу. Пришло время поместить на иконку изображение птички или написать букву. Если будете использовать картинку, то ее нужно слегка уменьшить, нажав Shift + T. Теперь нужно применить к ней стили слоя. Вы можете сделать вручную, как в примере вдавленного текста в фотошопе, так и применить уже готовые стили. Для таких несложных задач я использую готовые решения. И вот, что в итоге у нас получилосьИконка twitter

Проблема растровых изображений в том, что при их трансформации становятся видны зубцы на краях. Это можно исправить, но это отдельная большая тема и в рамки этого урока она не входит. Так что я постараюсь подготовить целый урок на тему сглаживания краев. Хотя, если делать не такие большие иконки, то рваных краев не будет заметно. Ну вот, теперь вы научились рисовать иконку twitter в фотошопе. Если что-то непонятно, спрашивайте и если вас не затруднит, поделитесь этой записью в социальных сетях. Спасибо.

Не стесняйтесь делиться записью в социальных сетях. Спасибо


8 комментариев
  1. Мария:

    Здравствуйте,Александр! У меня возник такой вопрос по уроку,когда я нажимаю Ctrl+Alt и → у меня почему-то фотошоп переворачивается. Я что то не так делаю? Может можно через меню как то сделать тоже самое или нет? Подскажите пожалуйста.

  2. Мария:

    Фотошоп CS5

  3. Мария:

    Windows 7 максимальная

    • Если у вас ноутбук и имеется на клавиатуре клавиша Cmd, то используйте ее вместо Ctrl. Если это не поможет, то зайдите в фотошопе в Редактирование — Клавиатурные сокращения и переназначьте клавиши, которые переворачивают окно. У меня такая же ОС. Фотошоп есть CS5 английский и CS6 русский. В обеих все работает хорошо.

  4. Мария:

    У меня ноутбук,но клавиши Cmd нет.Редактирование-Клавиатурное сокращение-Слои,а дальше что должно быть написано.Может без горячих клавиш можно,мне как то через меню проще и легче понимается.Спасибо.

    • Может быть есть клавиша Fn ? Попробуйте разные сочетания. Потому, что я не знаю как можно смещать слои в стороны на несколько пикселей другими способами. Вручную это не совсем удобно. Видимо у вас что-то с настройками самого фотошопа или ноутбука. Видел много уроков по созданию 3D моделей, где применяется именно такие сочетания клавиш, как здесь.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *