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

Однако запомните, что оба эти формата не поддерживаются IE и не будут в нем работать.

Мультиразмерный Favicon
Помимо обычного favicon размером 16х16 пикселей, которые используются для оформления адресной строки, существует его разновидность с размерами в 32×32 пикселя и 48×48 пикселей. Эти иконки очень распространены в среде Windows. Например, если вы хотите поместить ярлык на веб-страницу на ваш рабочий стол, Windows автоматически попытается использовать favicon в качестве изображения для ярлыка. Но стандартного размера (16х16 пикселей) будет недостаточно для качественного отображения, так как стандартный размер ярлыка в среде Windows 48х48 пикселей – это значит, что ярлык будет растянут до необходимых размеров и станет некрасивым и практически нечитаемым.

Однако существует способ исправить этот недостаток. Полезное свойство файлов.ico заключается в том, что они могут содержать в себе много вариантов одной и той же иконки с разными размерами и глубиной цвета (наподобие возможности.gif-файлов содержать множество фреймов). Поэтому если поместить в favicon.ico изображение сразу в нескольких размерах и с разной глубиной цвета, Windows сможет автоматически выбрать наиболее подходящие параметры для применения к ярлыку. Наиболее распространённые размеры ярлыков, которые могут быть использованы, — 16×16, 24×24, 32×32 и 48×48 пикселей.

Создание мультиразмерной иконки не намного сложнее, чем создание обычного favicon размером 16х16 пикселей. Необходимый плагин мы можем найти все на том же сайте Telegraphics , он позволит поместить несколько иконок в одном.ico-файле. В принципе это даже не плагин, а отдельная программа, которую можно использовать как в Windows (через командную строку), так и в MacOS (посредством перетаскивания). Также у этой программы существуют аналоги, как например: Sib Icon Studio (www.sibcode.com/icon-studio) и Any to Icon Convertor (www.aha-soft.com/anytoicon).

Что касается глубины цвета, вы могли заметить, что некоторые иконки имеют неровности (как зазубрины) по краям, в то время как другие сглаживают эти неровности и выглядят очень симпатично. Это возможно благодаря 32-битной глубине цвета, которая отображает настоящую прозрачность, как и Photoshop. Вы можете создать 32-битную версию иконки вместе с 24-битной (16 миллионов цветов, с поддержкой прозрачности как в.gif-файлах), 16-битную (256 цветов) и даже 8-, 4- или 2-битную версию, и поместить их всех в один ico-файл.

Поэтому если вы хотите быть уверенными, что ваш favicon будет смотреться красиво во всех возможных случаях – лучше сделать его сразу в нескольких варианта. Например:

16×16, 16-бит (256) цветов
16×16, 32-bit colors
32×32, 16-бит (256) цветов
32×32, 32-bit colors
48×48, 16-бит (256) цветов
48×48, 32-bit colors

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

Решение возможных проблем
Общие проблемы
В случае если после проделанных действий ваш «favicon» так и не появился, попробуйте несколько раз (около 5) обновить вашу страницу или очисть кэш браузера, или поставьте “??”) — это действие заставит думать браузер, что страница является новой и еще не была добавлена в кэш.

Еще одним способом решения этой проблемы является переход по прямой ссылке на ваш «favicon» (например: http://сайт /favicon.ico), после чего браузер (IE) немедленно отобразит и запомнит иконку.

Проблемы совместимости с браузерами
“Microsoft IE 6” (а также 7, 8 и 9) может не отображать “favicon” до тех пор, пока ссылка на вашу страницу не будет добавлена в избранное. В таком случае попробуйте следующий вариант – зажмите левую клавишу мышки на отображаемом “favicon” (обычно стандартная иконка IE), после чего “потрясите” его и отпустите. Данные действия приведут к перезагрузке страницы и обновлению иконки. Другим способом решения данной проблемы является добавление следующего кода в секцию “” страниц, на которых вы хотите видеть ваш “favicon”:

< link rel= "shortcut icon" href= "favicon.ico" > < link rel= "icon" type= "image/ico" href= "favicon.ico" >

“Safari” для Mас-систем не будет отображать обновленный “favicon” до тех пор пока не будет очищен кэш браузера. Однако нажатие кнопки меню “Empty cache” не решит проблему, так как “Safari” хранит иконки в отдельной папке. Чтобы очистить папку кэша иконок необходимо зайти в меню “Edit > Reset Safari” и поставить галочку напротив “Remove all website icons”. Альтернативным (ручным) способом является удаление содержимого следующей папки: “User>Library>Safari>Icons”. Для Windows-версии “Safari” путь немного отличается: “C:\Documents and Settings\YourUserName\Local Settings\Application Data\Apple Computer\Safari”, в этой папке необходимо удалить файл “WebpageIcons.db”. Напоминаю, что папка “Local Settings” и вложенные в неё папки скрыты по умолчанию, а значит для того, чтобы в них попасть, необходимо настроить отображение скрытых файлов и папок Windows. После удаления вышеуказанных фалов необходимо перезапустить “Safari” (в некоторых случаях также необходимо перезагрузить компьютер).

Для решения аналогичной проблемы в “Mozilla FireFox” необходимо очистить кэш браузера и перезапустить программу.

В браузере “Opera” такой проблемы нет, поэтому после обновления вашей иконки достаточно простого обновления страницы (возможно несколько раз).

Другой проблемой в ОС “Windows” является обновление иконок для Интернет-страниц (к примеру, при размещении иконки страницы на Рабочем столе). Для принудительного обновления изменившихся иконок необходимо выполнить следующие действия:
1. Нажать правой кнопкой по Рабочему столу;
2. Выбрать пункт меню “Свойства” (для “Windows XP”) или “Персонализировать” (для “Windows Vista” или “Windows 7”) и перейти на вкладку “Свойства Экрана”;
3. Поменять качество цветопередачи с 32-разрядного на 16-разрядное и нажать кнопку “ОК” или “Применить”;
4. Обратно поменять качество цветопередачи на 32-разрядно и нажать кнопку “ОК” или “Применить”.

Проблемы с плагином “Photoshop”для работы с иконками
Формат “Windows Icon” (ICO) будет недоступен, если:
1. Вы неправильно установили плагин;
2. Вы неправильно определили версию плагина подходящую для вашей ОС;
3. Рабочая область в “Photoshop” была создана не в 1, 4, 8-битных индексированных или 24-битных RGB режимах.

Также после установки плагина необходимо перезагрузить сам “Photoshop” для вступления в действие сделанных изменений.

Создание иконок может быть весьма сложным делом, потому, что вам нужно суметь сделать гибкий дизайн, который можно легко увеличивать или уменьшать. Для того чтобы добиться такой легкой возможности изменения размера, графические дизайнеры обычно используют программы для работы с векторной графикой, вроде Illustrator. Однако в этом уроке, рассчитанном на пользователей со средними знаниями, мы покажем, как сделать из наброска потрясающую иконку, используя Photoshop . Вам понадобится базовое знание программы Photoshop и, в частности, инструмента Перо (Pen Tool).

Предварительный просмотр

Введение

В этом уроке практически все фигуры рисуются с помощью инструмента Пера в Photoshop. Если вы не знаете, как пользоваться этим инструментом, вы можете обратиться к отличному уроку под названием: « » от одного из опытных графических дизайнеров на специализированном сайт PSDfan.

Шаг 1: Создаем документ Photoshop

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

Для удобства, залейте фоновый слой оттенком серого и установите в центре документа вертикальную направляющую: Просмотр – Новая направляющая (View > New Guide). Эта направляющая поможет добиться симметричности рисунка.

Шаг 2: Начинаем с основы

Один из самых простых способов достичь симметрии для формы (рисунка) – это нарисовать сначала только его половину. Выберите инструмент Перо (P) в Панели инструментов и нарисуйте форму, показанную ниже. Перед тем, как нарисовать фигуру, убедитесь, что вы выбрали Слои с фигурами из меню Настроек (опций) и установили черный цвет (#000000) в качестве цвета переднего плана.

Как только вы нарисовали половину фигуры (рисунка), выберите инструмент Выделения контура (Path Selection Tool) и кликните на фигуре на холсте.

Теперь нажмите комбинацию Ctrl+C, а затем Ctrl +V, чтобы скопировать и вставить такой же контур на слой.

Далее, выберите Редактирование – Трансформирование – Отразить по горизонтали (Правка – Трансформация – Отразить по горизонтали (Edit > Transform Path > Flip Horizontal) и переместите вторую половинку фигуры в правую сторону, так чтобы ее две половинки соединились.

При выбранном инструменте Выделение контура (Path Selection Tool), растяните выделение через обе половинки, затем кликните на кнопке «Объединить» в меню Опций; это соединит две половинки в одно целое, и в результате, у нас будет одна симметричная фигура.
Назовите слой с формой «основной», чтобы ваши слои были организованы, и вы легко могли в них ориентироваться.

Шаг 3: Применяем стиль к основному слою

Выберите Настройки стилей для слоя «основной» и примените к нему следующие из них:

Внутреннее свечение (Inner Glow)

Заливка градацией (Наложение градиента) (Gradient Overlay)

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

Шаг 4: Добавляем тени к основному слою

Создайте новый слой и расположите его под «основным» слоем.

Залейте выделение на нем, используя инструмент Эллиптического выделения (Elliptical Marquee Tool (M) и уменьшите его прозрачность до 30%.

Затем примените к нему два фильтра – Размытие по Гауссу и Размытие в движении (Gaussian Blur и Motion Blur).
Фильтр – Размытие – Размытие по Гауссу (Filter > Blur > Gaussian Blur)

Установите радиус на значение в 3.0px.

Фильтр – Размытие – Размытие в движении (Filter > Blur > Motion Blur)

Установите угол падения (Angle) на 0°, а расстояние (Distance) на 30px.

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

При активном выделении, пройдите к меню Выделение – Модификация – Расширить (Select > Modify > Expand) и расширьте выделение на 2px.

Передвиньте выделение на 5px вверх и нажмите на клавишу Delete, чтобы очистить область под выделением.

Выделите инструмент Перемещения (Move Tool (V) и передвиньте слой на 3px вниз.

Наконец, примените фильтр Размытие по Гауссу с радиусом 2.5px и уменьшите прозрачность слоя до 50%. Если вы точно придерживались наших инструкций, то у вас на данном этапе получится нечто такое.

Шаг 5: Создаем рубашку

Используя инструмент Пера (Pen Tool), нарисуйте фигуру, похожую на приведенную ниже и назовите ее «рубашка».

Когда вы закончите рисовать фигуру, примените к слою Заливку градацией (Gradient Overlay) светло-серого оттенка.

Шаг 6: Создаем шею

Выберите инструмент многоугольного выделения (Rectangular Marquee Tool (M) и, на новом слое, залейте выделение любым цветом, как показано ниже (мы будем добавлять к слою стиль, поэтому цвет, которым вы его зальете, не имеет значения).

После этого примените к слою стиль Заливка градацией (Наложение градиента) (Gradient Overlay).

Шаг 7: Создаем галстук

Следующий на очереди галстук. Это будет красный галстук, но мы будем только рады, если вы решите поэкспериментировать с разными цветами и узорами галстуков! Форму галстука создайте с помощью инструмента Пера (Pen Tool (P), используя тот же прием, о котором мы уже говорили.

Далее мы применяем к слою с галстуком несколько стилей:
Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

Вуаля! Вот как наш галстук теперь выглядит.

Далее нам надо сделать еще одну форму с помощью Пера (Tool (P) для узла.

Давайте применим несколько стилей к узлу галстука.
Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

Заливка градиентом (Наложение градиента) (Gradient Overlay)

Теперь наш галстук полностью завершен.

Шаг 8: Создаем воротник рубашки

Настало время создать воротник рубашки. Нарисуйте форму, которую вы здесь видите; цвет для заливки можно выбрать произвольно, поскольку позднее он будет перекрыт (просто выберите цвет, который вы можете легко отделить от фонового).

Назовите слой с новой формой «воротник».

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

Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

Заливка текстурой (Наложение узора) (Pattern Overlay)

Вот как выглядит готовая левая половинка воротника после окончания работы.

Чтобы закончить весь воротник, вам нужно продублировать левую его часть и отразить его горизонтально. Так как слой «воротник» содержит стили, трансформирование дублированной копии не сработает.

Поэтому, чтобы добиться желаемого результата, выберите слой «воротник» и нажмите комбинацию Ctrl+J, чтобы скопировать его.

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

После этого проделайте комбинацию Правка – Трансформация – Отразить по горизонтали (Edit > Transform > Flip Horizontal) и передвиньте вторую половинку вправо с помощью инструмента Перемещение (Move Tool), чтобы закончить воротник.

Шаг 9: Добавляем лацканы на пиджак

Установите цвета фона и переднего плана на значения по умолчанию нажатием клавиши D (она устанавливает черный цвет для переднего плана, а белый – для заднего).

Затем нарисуйте форму для левого лацкана пиджака, как показано ниже.

Добавьте эти стили для этого слоя:

Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

Внешнее свечение (Outer Glow)

Заливка градиентом (Наложение градиента) (Gradient Overlay)

Левый лацкан полностью закончен со стилями слоя.

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

Шаг 10: Набросок рукавов пиджака

Выберите инструмент Кисть (Brush Tool) и выберите мягкую кисть толщиной 4px.

Теперь выберите инструмент Пера (Pen Tool (P) и кликните на опции Путь, как показано на рисунке.

Создайте новый слой и нарисуйте кривую через правое плечо пиджака. Кликните правой клавишей мыши на пути и выберите в меню пункт Штриховать путь при выбранном цвете переднего плана черным (#000000).

Нажмите «OK» после выбора инструмента Кисть (Brush).

Теперь примените к новым путям такие стили:

Тень (Drop Shadow)

Заливка градиентом (Наложение градиента) (Gradient Overlay)

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

Шаг 11: Создаем голову

Нарисуйте эллипс для лица, как показано ниже.

Шаг 12: Добавляем тени на лицо

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

Передвиньте выделение на 4px вниз и залейте цветом #423820 на новом слое.

Примените фильтр Размытие в движении (Motion Blur filter) Фильтр – Размытие – Размытие в движении (Filter > Blur > Motion Blur) с углом 90° (Angle) и Расстоянием (Distance) 10px.

Повторите этот же самый фильтр нажатием комбинации Ctrl+F.

Выберите слой с тенью, кликните на слое «шея», удерживая Ctrl, чтобы создать вокруг него выделение, затем нажмите Ctrl+Shift+I, чтобы обратить выделение.

Нажмите клавишу Delete, чтобы очистить область под обращенным выделением.

Шаг 14: Добавляем тени в волосы

Точно так же, как вы добавляли тень на лицо, добавьте тень на волосы через лицо, используя тот же цвет, но с меньшей прозрачностью (Opacity) – около 70%.

Шаг 15: Совершенствуем волосы

Создайте новый слой и кликните на слое «волосы», удерживая Ctrl, чтобы загрузить его выделение.

Передвиньте выделение на 7px вверх и залейте белым цветом (#ffffff).

При выбранном выделении, передвиньте его на 5px вверх и нажмите клавишу Delete,чтобы очистить область под выделением.

Теперь примените к слою такие фильтры:
Фильтр – Размытие – Размытие по Гауссу (Filter > Blur > Gaussian Blur)

Установите опцию Радиус (Radius) на 1px.
Фильтр – Резкость – Резко (Filter > Sharpen > Sharpen)

Примените этот фильтр дважды.

Затем, установите прозрачность заливки слоя на 0% и примените к нему стиль Заливка градиентом (Наложение градиента) (Gradient Overlay).

Заключение

Все готово! Спасибо за то, что прошли вест тот урок! Надеюсь, что вам удалось выучить один или два приема Photoshop.

Если мы вдохновили кого-то из вас на новые работы с помощью этого урока, прошу добавить свои работы в комментарии!

Вот окончательная версия дизайна иконки.

Загрузить исходники

* (ZIP, 0.20мб)

Внимание! У вас нет прав для просмотра скрытого текста.

В этом уроке вы научитесь рисовать простую иконку папки с документами в Adobe Photoshop.

Финальное изображение:

Шаг 1

Откройте программу Photoshop и создайте новый документ, для этого нажмите комбинацию клавиш Control + N. В открывшемся меню введите следующие данные:

Примечание переводчика: на скриншоте

Высота (Width): 600 пикселей (pixels)
Ширина (Width): 600 пикселей (pixels)
Разрешение (Resolution ): 72 пиксель/дюйм (pixels / inch )
Цветовой режим (Color Mode ): RGB color , 8 bit
Содержимое фона (Background Contents): Белый (White)
Цветовой профиль (Color profile): sRGB IEC61966-2.1
Попиксельная пропорция (Pixel Aspect Ratio): Квадратные пиксели (square pixels)

После ввода данных нажмите Ок.

Затем отобразите сетку Просмотр - Показать - Сетку (View> Show> Grid) и включите функцию привязать к линиям сетки Просмотр - Привязать к - Линиям сетки (View - Snap To - Grid). Теперь нам необходимо настроить параметры сетки, перейдите в (Edit > Preferences > Guides, Grid & Slices) и сосредоточьтесь на разделе Сетка (Grid). Введите значение 5 в поле «Линия через каждые» (Gridline Every) и 1 в поле «Внутреннее деление на» (Subdivision). Установите цвет сетки #a7a7a7.

После того как вы выставили все настройки, нажмите Ок. Не отвлекайтесь на сетку, в дальнейшем она облегчит нам работу. Вы можете всегда отключить или включить сетку с помощью сочетания клавиш CTRL + ”. Вам также следует открыть панель Инфо (Окно - Инфо (Window > Info)), чтобы иметь возможность текущего просмотра размера и положения фигур.

Шаг 2

Установите светло-коричневый цвет (#c69c6d) переднего плана и выберите инструмент (Rounded Rectangle Tool). В верхней части панели инструмента установите радиус 5 px и создайте векторную фигуру размером 105 х 15 px. Затем находясь на слое с векторной фигурой (прямоугольник со скругленными краями, который мы только что создали), выберите операцию Объединить фигуры (Add to Shape Area) и добавьте еще один прямоугольник со скругленными краями размером 40х20 px, после этого разместите его так как показано на изображении ниже.

Шаг 3

Перейдите на панель Слои (Layers) (если панель слои не отображается, перейдите в Окно - Слои (Window - Layers)) и переименуйте векторную форму на «back», затем дважды щелкните по слою, чтобы открыть окно Стиль слоя (Layer Style). Примените к слою следующие эффекты: Внутренняя тень (Inner Shadow) и Наложение градиента (Gradient Overlay).

Примечание переводчика: на скриншотах

Внутренняя тень:

Режим наложения (Blend Mode): Перекрытие (Overlay), цвет белый (#ffffff)
Непрозрачность (Opacity): 75%
Угол (Angle): 90°
Глобальное освещение
Смещение (Distance): 1 рх
Стягивание (Choke): 0%
Размер (Size): 1 рх
Сглаживание
Шум (Noise): 0%

Наложение градиента

Режим наложения (Blend Mode): Перекрытие (Overlay)
Непрозрачность (Opacity): 100%
Градиент (Gradient): Редактор градиентов
цвет #000000 позиция 40%
цвет #232323 позиция 80%
цвет #505050 позиция 100%
Выровнять по слою (Align with Layer): Поставить галочку
Стиль (Style): Линейный (Linear)
Угол (Angle): 90°
Масштаб (Scale): 100%

Шаг 4

Убедитесь, что цвет переднего плана по-прежнему установлен светло-коричневый (#c69c6d), выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool). Создайте векторную форму размером 115 х 75 пикселей, расположите ее как показано на первом изображении, затем перейдите в Редактирование - Трансформирование - Деформация (Edit - Transform - Warp). Вверху выберите:

Деформация (Warp): Выпуклый (Bulge)
Включите кнопку: Изменить ориентацию деформации (Orientation)
Изгиб (Bend): 5%
Установить искажение по вертикали (Vertical distortion) V: -3%

После этого нажмите Enter. У вас должен получиться такой же результат, как на втором изображении. Затем переименуйте слой, назовите его «front» .

Шаг 5

Перейдите к слою под названием «front» и примените следующие эффекты:

Внутренняя тень (Inner Shadow):

Режим наложения (Blend Mode): Перекрытие (Overlay), цвет белый (#ffffff)
Непрозрачность (Opacity): 50%
Угол (Angle): 90°
Глобальное освещение (Use Global Light): Снять галочку
Смещение (Distance): 3 рх
Стягивание (Choke): 0%
Размер (Size): 5 рх
Сглаживание (Anti-aliased): Снять галочку
Шум (Noise): 0%

Внутреннее свечение (Inner Glow):

Режим наложения (Blend Mode): Мягкий свет (Soft Light)
Непрозрачность (Opacity): 25%
Метод (Technique): Мягкий (Softer)
Источник (Source): На краях (Edge)
Стягивание (Choke): 0%
Размер (Size):10 рх
Сглаживание (Anti-aliased): снять галочку
Диапазон (Range): 50%
Колебание (Jitter): 0%

Тиснение (Bevel and Emboss):

Стиль (Style): Внутренний скос (Inner Bevel)
Метод (Technique): Плавное (Smooth)
Глубина (Depth): 100%
Направление (Direction): Вверх (Up)
Размер (Size): 100 рх
Смягчение (Soften): 0 рх
Угол (Angle): 90 °
Высота (Altitude): 30°
Глобальное освещение (Use Global Light): Снять галочку
Контур глянца (Gloss Contour): Волнистый уклон (Rolling Slope - Descending)
Сглаживание (Anti-aliased): Снять галочку
Режим подсветки (Highlight Mode): Умножение (Multiply), Цвет черный #000000
Непрозрачность (Opacity): 30%
Режим тени (Shadow Mode): Перекрытие (Overlay), Цвет белый #ffffff
Непрозрачность (Opacity): 30%

Наложение градиента (Gradient Overlay):

Режим наложения (Blend Mode): Умножение (Multiply)
Непрозрачность (Opacity): 100%
Градиент (Gradient): Редактор градиентов
цвет #7с7с7с позиция 0%
цвет #959595 позиция 10%
цвет #afafaf позиция 25%
цвет #fafafa позиция 100%
Выровнять по слою (Align with Layer): Поставить галочку
Стиль (Style): Линейный (Linear)
Угол (Angle): 90°
Масштаб (Scale): 100%

Наложение узора (Patter Overlay):

Режим наложения (Blend Mode): Перекрытие (Overlay),
Непрозрачность (Opacity): 90%
Узор (Patter): Выберите самый темный узор из Neutral Tileable Leather Patterns
Масштаб (Scale): 25

Примечание переводчика: для того чтобы загрузить узор (Patter) кожи, нажмите на шестеренку и в раскрывшемся меню выберите Загрузить узоры. После этого укажите путь к папке с узорами кожи, которые вы скачали, и выберите файл webtreats leather patterns. pat.

Шаг 6

Установите цвет переднего плана черный (#000000) и выберите инструмент Эллипс (Ellipse Tool). Создайте векторную форму размером 105 х 5 пикселей, поместите ее так, как показано на первом изображении. Щелкните правой кнопкой мыши по слою, который мы только что создали, затем в раскрывшемся меню выберите Преобразовать в Смарт-объект (Convert to Smart Object). Расположите этот слой над фоном (Shift + CTRL + [) и перейдите в (Filter - Blur - Gaussian Blur), введите радиус 3 px и нажмите OK.

Шаг 7

Выберите инструмент Эллипс (Ellipse Tool). Создайте векторную форму размером 105 x 10 пикселей, поместите ее так, как показано на первом изображении. Затем щелкните правой кнопкой мыши по слою и преобразуйте его в Смарт-объект (Convert to Smart Object). Расположите этот слой над фоном (Shift + CTRL + [). После этого перейдите в Фильтр - Размытие - Размытие по Гауссу (Filter - Blur - Gaussian Blur) и введите радиус 3 px.

Шаг 8

Установите цвет переднего плана #aecef5 , выберите инструмент Прямоугольник (Rectangle Tool) и создайте прямоугольник размером 105 x 70 пикселей, расположите его так, как показано на первом изображении. Выберите слой с синим прямоугольником и нажмите CTRL + T (или перейдите в Редактирование - Трансформирование - Поворот (Edit - Transform - Rotate)). Вверху введите угол поворота -4° и нажмите Enter.

Переместите слой с синим прямоугольником под слой «front». Откройте Стиль слоя (Layer Style) и выберите эффект Обводка (Stroke).

Примечание переводчика: К эффекту Обводка (Stroke) примените следующие настройки (на скриншоте):

Размер (Size): 1 рх.
Положение (Position): Внутри (Inside )
Режим наложения (Blend Mode): Нормальный (Normal)
Непрозрачность (Opacity): 100%
Цвет (Color): #90 b0 d7

После этого, щелкните правой кнопкой мыши по слою с синим прямоугольником и выберите Копировать стиль слоя (Copy Layer Style)

Шаг 9

Для следующих шагов нам понадобится сетка с настройками «Линия через каждые» (Gridline Every) 1 px, поэтому перейдите в Редактирование - Настройки - Направляющие, сетка и фрагменты (Edit > Preferences > Guides, Grid & Slices) и введите 1 в поле «Линия через каждые» (Gridline Every). Выберите инструмент Прямоугольник (Rectangle Tool) и создайте прямоугольник размером 105 x 70 пикселей, расположите его так, как показано на первом изображении. Нажмите CTRL + T, введите вверху угол поворота -5° и нажмите Enter.

Переместите этот слой под слой с первым синим прямоугольником, затем щелкните правой кнопкой мыши по нему и в раскрывшемся меню выберите Вклеить стиль слоя (Paste Layer Style).

Шаг 10

Выберите инструмент Прямоугольник (Rectangle Tool) и создайте прямоугольник 105 х 70 px, поместите его как показано на первом изображении и нажмите CTRL + T . Вверху введите угол поворота 3° и нажмите Enter.

Переместите этот слой под слой « front», затем щелкните правой кнопкой мыши по нему и в раскрывшемся меню выберите Вклеить стиль слоя (Paste Layer Style).

Шаг 11

Отключите Сетку (Просмотр - Показать - Сетку (View > Show > Grid)) и продублируйте слой под названием «front» (CTRL + J). Очистите продублированный стиль слоя, для этого щелкните правой кнопкой мыши по слою и выберите Очистить стиль слоя (Clear Layer Style).

Уменьшите Заливку (Fill) продублированного слоя до 0%.

Затем перейдите в Слой - Стиль слоя - Параметры наложения (Layer > Layer Style > Blending Options) и примените следующие эффекты:

Примечание переводчика: на скриншотах

Внутренняя тень (Inner Shadow):

Режим наложения (Blend Mode): Мягкий свет (Soft Light), цвет белый (#ffffff)
Непрозрачность (Opacity): 100%
Угол (Angle): 90°
Глобальное освещение
Смещение (Distance): 1 рх
Стягивание (Choke): 0%
Размер (Size): 0 рх
Сглаживание
Шум (Noise): 0%

Внешнее свечение (Outer Glow):

Режим наложения (Blend Mode): Нормальный (Normal)
Непрозрачность (Opacity): 40%
Шум (Noise): 0%
Метод (Technique): Мягкий (Softer)
Размах (Spread): 0%
Размер (Size): 4 рх

Шаг 12

Сосредоточьте своё внимание на панели Слои (Layer), Зажмите на клавиатуре клавишу CTRL и щелкните левой кнопкой мыши по слою с синим прямоугольником. Затем, удерживая клавишу CTRL, зажмите клавишу Shift и выделите два других синих прямоугольника. В итоге у вас должно быть выделено три синих прямоугольника. Не снимая выделения, перейдите на слой из предыдущего шага (слой с заливкой 0%), и добавьте к нему слой маску, для этого нажмите внизу на кнопку Добавить слой маску (Add Layer Layer Mask).

Откройте диалоговое окно Стиль слоя, затем перейдите в Параметры наложения (Blending Option) и установите галочку Слой-маска скрывает эффекты (Layer Mask Hidden Effects). После этого нажмите комбинацию клавиш Ctrl + D для того, чтобы снять выделение.

Шаг 13

Выберите на панели инструментов горизонтальный текст (Horizontal Type Tool) и добавьте надпись «docs» как показано на первом изображении. Примените к надписи «docs» шрифт под названием Eras Bold ITC и установите размер шрифта 30 пт. Затем уменьшите заливку текстового слоя до 0%.

Перейдите в Стиль слоя (Layer Style) и примените следующие эффекты:

Тень (Drop Shadow):

Режим наложения (Blend Mode): Мягкий свет (Soft Light), Цвет белый (#ffffff)
Непрозрачность (Opacity): 100%
Угол (Angle): 90°
Глобальное освещение (Use Global Light): Снять галочку
Смещение (Distance): 1 рх
Размах (Spread): 0%
Размер (Size): 0

Внутренняя тень (Inner Shadow):

Режим наложения (Blend Mode): Мягкий свет (Soft Light), цвет черный (#000000)
Непрозрачность (Opacity): 100%
Угол (Angle): 90°
Глобальное освещение (Use Global Light): Снять галочку
Смещение (Distance): 1 рх
Стягивание (Choke): 0%
Размер (Size): 8 рх
Сглаживание (Anti-aliased): Снять галочку
Шум (Noise): 0%

Тиснение (Bevel and Emboss):

Стиль (Style): Внутренний скос (Inner Bevel)
Метод (Technique): Плавное (Smooth)
Глубина (Depth): 100%
Направление (Direction): Вверх (Up)
Размер (Size): 2 рх
Смягчение (Soften): 5 рх
Угол (Angle): 90°
Высота (Altitude): 30°
Глобальное освещение (Use Global Light): Снять галочку
Сглаживание (Anti-aliased): Снять галочку
Режим подсветки (Highlight Mode): Мягкий свет (Soft Light), Цвет черный #000000
Непрозрачность (Opacity): 80%
Режим тени (Shadow Mode): Нормальный (Normal), Цвет черный #000000
Непрозрачность (Opacity): 0%

Обводка (Stroke):

Размер (Size): 1 рх
Положение (Position): Внутри (Inside)
Режим наложения (Blend Mode): Мягкий свет (Soft Light)
Непрозрачность (Opacity): 100%
Тип обводки (Fill Type): Цвет (Color)
Цвет (Color): Черный #000000

Шаг 14

Мы закончили, теперь вы можете легко изменить цвет иконки. Перейдите на панель Слои (Layer), сфокусируйте свое внимание на векторных фигурах с цветом, установленным на # c69c6d, и просто замените его цветом, который вы предпочитаете.

Примечание переводчика: для того чтобы изменить цвет иконки (папки) выберите слой под названием «front», затем дважды кликните по миниатюре слоя и в палитре цветов подберите подходящий цвет. Проделайте тоже самой для слоя под названием «back».

Вот так должен выглядеть ваш конечный результат.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как легко и быстро создать свою иконку в фотошопе. Иконка в 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

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