Создаем в фотошопе симпатичную иконку в стиле iPhone

8

14342
12-03-2012

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

Шаг 1.
Создаем в фотошопе новый документ, заливаем его черным цветом. Создаем прямоугольник со скругленными краями, цвет #0b82d0, размер 210х210 пикселей.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 2.
Применим к фигуре «Фильтр» (Filter) > «Шум» (Noise) > «Добавить шум» (Add Noise…) со значением 4.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 3.
Далее применим стиль слоя «Перекрытие узора» (Pattern Overlay) в виде решетки.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 4.
А также стиль слоя «Внутренняя тень» (Inner Shadow).Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 5.
Получился такой результат.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 6.
Теперь создадим две узких белых линии, проходящих через центр фигуры. Снизим их прозрачность до 35%, а режим наложения поменяем на «Перекрытие» (Overlay).Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 7.
Делаем дубликат слоя с фигурой, кликнув правой кнопкой мыши по слою, выбираем пункт «Трансформировать в новый смарт-объект» (Group Into New Smart Object). Далее выбираем инструмент «Затемнитель» (Burn Tool) и мягкой кистью затемняем нижнюю часть фигуры. Потом воспользуемся инструментом «Осветлитель» (Dodge Tool) и осветляем верхнюю часть фигуры.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 8.
Меняем режим наложения слоя на «Мягкий свет» (Soft Light).Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 9.
Создаем новый прямоугольник с закругленными краями.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 10.
В диалоговом окошке стилей слоя открываем закладку «Параметры наложения» (Blending Options) и ставим параметр «Непрозрачность заливки» (Fill Opacity) на нулевое значение.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 11.
Далее стиль слоя «Обводка» (Stroke).Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 12.
Получили такой результат.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 13.
Теперь, воспользовавшись уроком о том, как в фотошопе имитировать нажим кисти, создаем прямую белую линию. (Для наглядности я отключила фигуру из предыдущего шага)Создаем в фотошопе симпатичную иконку в стиле iPhone

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

Шаг 15.
После включения слоя с квадратной фигурой, получился такой результат.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 16.
Повторим Шаг 13, чтобы сделать линии для центрального перекрестья. Трансформируем фигуру до нужных размеров и устанавливаем в самый центр.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 17.
На новом слое создаем белый круг.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 18.
В диалоговом окошке стилей слоя открываем закладку «Параметры наложения» (Blending Options) и ставим параметр «Непрозрачность заливки» (Fill Opacity) на нулевое значение, а параметр «Непрозрачность» (Opacity) на значение 30%.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 19.
Далее стиль слоя «Обводка» (Stroke).Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 20.
После этого делаем еще три копии круга и устанавливаем их в углах фигуры.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 21.
Делаем большой белый круг в центре.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 22.
Скопируем для него стили слоя из Шага 18 и 19.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 23.
Делаем маленький белый круг в центре.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 24.
В диалоговом окошке стилей слоя открываем закладку «Параметры наложения» (Blending Options) и ставим параметр «Непрозрачность заливки» (Fill Opacity) на нулевое значение.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 25.
Далее стиль слоя «Обводка» (Stroke).Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 26.
Получился такой результат.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 27.
Теперь воспользуемся инструментом «Произвольная фигура» (Custom Shape Tool) из базового набора фотошопа. Хотя, здесь можно выбрать любую другую симметричную круглую фигуру. Я остановилась на такой.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 28.
В диалоговом окошке стилей слоя открываем закладку «Параметры наложения» (Blending Options) и ставим параметр «Непрозрачность заливки» (Fill Opacity) на нулевое значение.Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 29.
Далее стиль слоя «Обводка» (Stroke).Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 30.
Выглядит это так. После этого кликнув правой кнопкой мыши по слою, выбираем пункт «Трансформировать в новый смарт-объект» (Group Into New Smart Object). Создаем в фотошопе симпатичную иконку в стиле iPhone

Шаг 31.
Теперь, удерживая Ctrl, щелкаем по слою из Шага 23, чтобы выделить маленький центральный круг. После этого нажимаем Del, чтобы удалить центральную часть фигуры из предыдущего шага. Финальный результат выглядит так.Создаем в фотошопе симпатичную иконку в стиле iPhone

  • Короткая ссылка на этот пост: https://www.designonstop.com/?p=6674
  • Поддержать DesingNonstop рублём!

Написать комментарий с помощью формы ВКонтакте

Комментариев 8 комментариев

Супер! =) Теперь можно любую iPhone иконку замутить без проблем! ) спасибо! )

ОтветитьОтветить

@Newboon:
Пожалуйста ))

ОтветитьОтветить

Наташа, а не подскажете: то ли у вас, то ли где-то ещё не так давно видела урок как состарить фотографию (имеется в виду — нанести на картинку будто бы потёртости и царапины). Но вот не могу найти — где это было.

ОтветитьОтветить

@Княгиня:
Может в этом уроке https://www.designonstop.com/?p=1983 Там есть пара приемов как создать потертости…

ОтветитьОтветить

@Наташа Клевер: Кажется, оно. Спасибо.
В идеале, правда, надо иметь в запасе несколько текстур с царапинами, чтобы они не повторялись от фотки к фотке, но для одного-двух раз хватит и одной.

ОтветитьОтветить

@Княгиня:
Пожалуйста!
Все правильно. У меня тоже есть в запасниках 2-3 текстуры с царапинами, так я их использую практически постоянно с разными режимами наложения.

ОтветитьОтветить

У кого проблемы с фотошопом, можно воспользоваться онайн сервисом, который из Вашей картинки быстро и качественно сделает иконку: http://www.quirco.com/iPhoneIcon

ОтветитьОтветить

@Egor:
Спасибо за ссылку!

ОтветитьОтветить

Написать комментарий с помощью обычной формы блога

Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!

47 queries in 0,252 seconds.