Как сделать иконку для папки в фотошопе. Рисуем иконку папки с документами в фотошоп

Вот что мы должны получить:

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

Шаг 1 - Новый файл / Техника Пера
Откройте Photoshop и создайте новый документ (Ctrl + N). Используйте следующие настройки:
Разрешение: 72dpi
Цветовой режим: RGB цвет
Размеры: 600 × 600 пикселей

Создайте следующую фигуру с помощью инструмента Pen Tool (P) (Перо). Цвет: # 3da1e2

Шаг 2 - Создание фигур с помощью Пера
Нарисуйте заднюю часть папки с помощью Pen Tool (Пера), используя ту же технику рисования. Затем нарисуйте полосу, как показано на рисунке.
Цвет: # 003658 # 3da1e2 # 08517e

Шаг 3 - Закончим форму
Как только Вы закончили рисунок папки, нужно добавить лист бумаги и стрелку, как показано на рисунке. Теперь у вас должны быть 5 слоев. Каждая форма будет на отдельном слое. Назовите каждый слой.
Цвет: # ffffff # 32e732

Шаг 4 - Добавление цветовых эффектов
Добавьте следующие стили слоя к передней части папки. Понизьте непрозрачность до 90%.

Добавить следующие стили слоя для бумаги. Понизьте непрозрачность слоя примерно до 90-95%.

Добавьте следующие стили слоя для полосы.

Добавьте следующие стили слоя к задней части папки.

Добавьте следующие стили слоя для стрелки.

Теперь ваша иконка выглядит так.

Шаг 5 - Добавление Рефлексов
Добавить новую группу под названием "Рефлексы". Используйте Pen Tool (Перо), чтобы нарисовать отражение, как показано на рисунке. Убедитесь, что вы рисуете только контур, а не фигуру. После того как вы закрыли путь, щелкните правой кнопкой мыши по рабочей области и выберите make selection (Создать выделение) (растушевка (feather) 0). Возьмите большую кисть (диаметром около 470, твердость 0) и закрасьте правую часть выделения, как на рисунке, для создания белого отражения. Измените режим смешивания на Overlay (Перекрытие) и уменьшить непрозрачность до 63%.

Шаг 6 - Края
Создайте новую группу под названием "Края", создайте новый слой в ней (Ctrl + Shift + N или нажмите значок создания нового слоя). Добавление бликов на краях придает иконке 3D эффект. Используйте Pen Tool (Перо), чтобы создать линии обводки вокруг углов и всех полей папки, бумаги и стрелки. Затем щелкните правой кнопкой мыши по рабочей области и выберите Stroke Path (Выполнить обводку) - Brush (Кисть). Настройки кисти должен быть изменены заранее, master diameter (диаметр) 8 пикселей а hardness (твердость) 0.

Шаг 7 - Тени
Создайте новый слой (Ctrl + Shift + N) для теней и поместить его в новую группу (Ctrl + G). Сделайте выделение, как вы это делали в 5 шаге, для создания отражений. Заполните выделение черным цветом, а затем размойте поля с помощью инструмента Blur tool (Размытие). Если тени выглядят слишком тёмными, снизьте непрозрачность слоя до 40%.

Шаг 8 - Добавление текста
Добавьте текст, используя любой шрифт, который вам нравится. Я выбрал "Agency FB". Размер шрифта: 40, непрозрачность слоя: 75%.

Шаг 9 - Итоговое добавление рефлексов и тени
Добавьте еще несколько рефлексов на бумагу, используя те же методы, что приведены в 5 Шаге.

Добавить тень, используя Ellipse Tool (E) (Эллипс). Нарисуйте эллипс, как показано на рисунке и добавьте немного Filter - Blur - Motion blur (Фильтр - Размытие - Размытие в движении). Уменьшите непрозрачность по своему вкусу.

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

Вот что мы должны получить:

Создайте следующую фигуру с помощью инструмента Pen Tool (P) (Перо). Цвет: # 3da1e2

Добавить следующие стили слоя для бумаги. Понизьте непрозрачность слоя примерно до 90-95%.

Добавьте следующие стили слоя для полосы.

Добавьте следующие стили слоя к задней части папки.

Добавьте следующие стили слоя для стрелки.

Теперь ваша иконка выглядит так.

Как легко и быстро создать свою иконку в фотошопе. Иконка в Photoshop мы сохраним как формат иконок.ico
Для начала вам надо сделать поддержку формата.ico в фотошопе.

Поддержка формата ICO

Недавно мне понадобилось нарисовать другу favicon в photoshop. После начатой работы я вдруг понял, что photoshop не дружит с ico форматом. Недолго думая, я вдруг вспомнил, что уже сталкивался с этим и подружить ico я мог только с плагином о котором я вам и расскажу.
Для того, чтобы подружить photoshop cs6 и младше с ico форматом (подружить – это открывать формат ico, редактировать его, сохранять в другой формат или сохранять в ico) нам понадобиться плагин.
Итак первым делом давайте скачаем плагин, примерно с этого сайта выбрав для какой разрядности (я не знаю как у меня разрядность Windows) вам нужен плагин или для 32-ух или для 64-ёх разрядной системы

После того, как вы загрузили zip файл извлеките из него один файл с расширением 8bi.

Теперь этот файл киньте в папку (для 32-ух и 64-ёх разрядных систем)
C:/Program Files/Adobe/Adobe Photoshop CS6 (64 Bit)/Required/Plug-Ins/File Formats/
C:/Program Files (x86)/Adobe/Adobe Photoshop CS6/Required/Plug-Ins/File Formats

После этого выйдите из photoshop и запустите его заново. Теперь вы можете сохранять в ico и открывать ico формат прямо в своём любимом редакторе photoshop. Единственное, что если вы хотите сохранить в формате ico размер должен быть 16 на 16 пикселей или окошка с выбором сохранения в ico НЕ БУДЕТ!

После того, как фотошоп у нас уже поддерживает ico формат, мы можем приступать к созданию иконки в фотошопе. Если вы хорошо рисуете, то можете нарисовать на новом документе, с прозрачным фоном иконку. Разрешение не более чем 512 на 512 пикселей. Всё равно сохранять иконку мы будем не в формате 512 на 512, а в меньшем!

Как мы видим, у картинки нет фона. Она нам отлично подойдёт для создания иконки в формате ico в фотошопе . Открываем её в фотошопе, делаем размер 256×256 пикселей и сохраняем в формате ico

Наша иконка готова, и мы её успешно применяем!

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

Сделать иконку (значок) папки из своей фотографии можно в стандартной программе — Paint , которая у каждого должна быть в операционной системе windows 7

Поверьте мне, со своими значками вам намного будет удобней и быстрей отыскать нужную папку, не вчитываясь в текст (название папки)

Вот небольшой пример. Такой вид папки ускоряет поиск среди большого количества похожих папок.

Найти программу «Paint « можно через «Пуск » и «Все программы » Запустите её и перетащите рисунок в окно программы. А ещё проще, это вызвать контекстное меню, щёлкнув по изображению, которое хотите поставить в роли значка, правой клавишей мышки. Выбираем пункт «Изменить » Откроется программа «Paint »

Создаём значок в программе Paint

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

Обрезаем. На панели программы выбираем инструмент «Выделить » В параметрах выделения указываем фигуру «Прямоугольная область » Левой клавишей мышки выделяем фрагмент фото. Удерживая клавишу, смотрим, как изменяется размер в нижней панели программы.

Подогнали размер, жмём кнопку «Обрезать »

Теперь фотография получилась квадратная, продолжаем.

После обрезки меняем размер будущего значка. Жмём «Изменить размер » Изменяем в пикселях и вводим размер 64 по вертикали и горизонтали. Сохраняем «ОК »

Ставим свой значок на папку

Всё заготовка есть, применяем её к папке. Наводим курсор на любую папку и правой клавишей мышки вызываем меню. В самом низу списка заходим в пункт «свойства » Далее «Настройка » И внизу кнопка «Сменить значок.. »

Откроется окошко с системными значками. Но нам они не нужны, мы же хотим своё изображение применить. Тогда идём в обзор и ищем наш только что созданный значок.

Кстати в проводнике вы его можете не найти, так как наше изображение не является значком формата «ico » Чтобы его увидеть выберите отображать «Все файлы *.* »

Теперь всё в порядке, жмём «ОК »

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

Но это ещё не всё. Собственные иконки можно применить и к ярлыкам. Смотрите, как они выглядят на моём рабочем столе.

Хитрость, которая сделает Ваш компьютер бессмертным!

Сегодня мои коллеги из команды Клабпрофи, впервые рассказывают о хитрости, которая делает Ваш компьютер неуязвимым к любым невзгодам:

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

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

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

О том, как это работает и как внедрить данную технологию уже в новогодние праздники, смотрите здесь:

Это полезно знать:

Аватан — бесплатный фоторедактор онлайн с…

Flat-дизайн это относительно новое направление в разработке веб-интерфейсов. iOS и даже Windows постепенно адаптируются под этот стиль, и, в скором времени, почти все (если вообще не все) веб-сайты переймут данный подход.

Однажды, проснувшись утром и открыв свой любимый сайт, вы будете удивлены тем, что его внешний вид также flat-дизайн ! И вы немедленно броситесь перерабатывать свой собственный блог или сайт, чтобы быть в тренде.

Исходя из вышесказанного, вопрос напрашивается сам собой: «Почему бы не начать переработку интерфейса уже сегодня »? Так вы сможете быть на шаг впереди остальных!

Вы можете подумать, «С чего же мне начать? » Конечно, реконструкция дизайна сайта это адский труд. Данная статья как раз и посвящена этому – она будет вашей рукой помощи в этом нелегком деле.

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

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

В данной статье, я постараюсь облегчить решение задачи переработки дизайна и рассказать о том, каким образом создаются иконки навигации во flat-стиле. Я буду использовать графический пакет Adobe Photoshop CS6 (но вы можете без проблем использовать более ранние версии). Приготовьтесь – мы начинаем.

Вот наш конечный результат:

Откройте Photoshop. Создайте новый файл, использовав пресет «Фото » (Photo) (10×8 inch, 300 DPI, прозрачный фон, цветовая схема RGB ).

Выберите инструмент «Прямоугольник со скругленными углами » (Rounded Rectangle) и создайте новую фигуру с размерами 1736 на 1736 пикселей (px), радиусом скругления 83 пикселя и цветом #82d8b5 . Можно задать и свой цвет, наиболее хорошо сочетающийся с дизайном вашего сайта.

Затем, используя инструмент «Перо » (Pen tool) и нарисуйте нечто, похожие на изображение ниже. Используйте цвет #a30d00 . Это будет крышей нашего домика, обозначающего главную страницу сайта.

Далее, не переключая инструмент «Перо », создайте прямоугольную фигуру как показано на изображении ниже. При этом используйте цвет #ffffff . Также, нарисуйте маленький квадрат с помощью инструмента «Прямоугольник » с цветом #3498db .

Отправьте тень на самую нижнюю позицию и растрируйте этот слой. Используя инструмент «Волшебная палочка » (Magic wand tool), создайте выделение на слое с большим прямоугольником с закругленными углами, внутри которого находится наш домик, а затем инвертируйте выделенную область (можно использовать сочетание клавиш CMD/CTRL+Shift+I ). Не снимая выделения, выберите слой с тенью и нажмите кнопку «delete ».

Иконка готова. Чтобы сохранить её, нажмите «Файл>Сохранить для веб и устройств.. » (File>Save for Web) (горячая клавиша CTRL + Shift + ALT + S ). Сохраните иконку в формате PNG-24 с включенной прозрачностью.

Мы хотим, чтобы все сохранилось в формате PNG-24 с поддержкой прозрачности.

Теперь, займемся иконкой Post :

Ниже вы можете видеть иконки About Me и Contact Me :

Все иконки можно скачать тут .

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

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