Однако запомните, что оба эти формата не поддерживаются 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мб)
Внимание! У вас нет прав для просмотра скрытого текста.
Доброго всем денечка, мои дорогие друзья! Вы знаете? Иногда так надоедают стандартные ярлыки, точнее иконки, что хочется чего-то новенького, дабы разнообразить свое пребывание за компьютером. Можно конечно , сменить фон рабочего стола, но сегодня я хотел бы вам рассказать как сделать иконку из картинки с помощью моего любимого фотошопа.
Многие ошибочно предполагают, что достаточно на ICO, и сразу изображение преобразуется в эту самую иконку. Ну-ну. Попробуйте сами и вам выдастся ощибка, когда вы попытаетесь заменить изображение ярлыка. В общем давайте лучше делать, чем трындеть) Погнали!
Сейчас я хочу сменить иконку для моего браузера гугл хром. Как лучше всего поступить в данной ситуации? Давайте по порядку.
Что же тогда делать? Как тогда нам сделать иконку? Да элементарно. В этом нам поможет один внешний плагин (дополнение), благодаря которому нужный нам формат станет доступным для сохранения. В общем давайте, повторяйте за мной.
Что мы только что сделали? Мы скачали файлы плагинов (для разных разрядностей), которые дополнительно устанавливают новый формат в фотошоп. Папка File Formats как раз служит для подключения новых форматов. Надеюсь, я понятно объясняю? А то мало ли)
Ну а теперь заходите снова в фотошоп, открывайте картинку из которой хотите сделать иконку. Теперь вы сможете сохранять файл с расширением ICO . Просто как обычно сохраните картиночку и теперь выберите нужное расширение из списка.
ВАЖНО! Если у вас большое изображение, то при сохранении вы не увидите формата ico в списке допустимых. Дело в том, что эта возможность недоступна, если ваша картинка превышает размер 256*256. Если это так, то просто до 64*64. Думаю, что больше вам не потребуется. После замены расширение будет доступно.
Ну а теперь дело за малым, осталось лишь заменить полученную штуку на ярлыке. Для этого нажмите правой кнопкой мышки на нужном ярлыке и выберите «Свойства» . После этого выберите «Сменить значок» и теперь ищите свежесохраненную иконку там, куда вы ее положили, нажав предварительно кнопку обзор.
Ну как? Не появилось у вас желания обновить ваши ярлычки? Можете поэкспериментировать и слегка преобразить ваш рабочий стол.
Ну а вообще, если вы хотите хорошо освоить фотошоп, то я очень рекомендую вам посмотреть прекрасные видеоуроки , благодаря которым вы научитесь владеть этим замечательным фоторедактором. Все уроки построены просто великолепны. Я сам его смотрел и узнал много новенького.
Ну вот пора и честь знать. На сегодня я заканчиваю. Надеюсь, что вам моя статья понравилась и я увижу вас и в других своих постах. И конечно же я рекомендую вам подписаться на обновления блога, дабы не пропустить чего-то интересного. Успехов вам! Пока-пока.
С уважением, Дмитрий Костин.
В этом уроке я покажу как нарисовать простые, в стиле минимализма иконки для сайта. Основной вид иконок заключается в форме облака. Данный набор можно с легкостью трансформировать без потери качества, и в один клик менять цветовой диапазон. Давайте приступим.
Шаг 1: Создание фигуры облака
Создайте новый документ 745х200 пикслей. Установите основной цвет голубой #48abff . Возьмите инструмент "Эллипс" щелкните левой кнопкой мыши по документу, в диалоговом окне установите ширина и высота: 70 пикселей
Сделайте дубликат фигуры, для этого нажмите сочетание клавиш Ctrl + J. С помощью стрелки передвиньте фигуру в право
Снова возьмите инструмент "Эллипс", щелкните по документу и установите ширина/высота: 90 пикселей;. Поместите фигуру как показано ниже:
Создайте еще одну фигуру, только в этот раз ширина и высота: 40 пикселей;. У вас должно получится, так:
Теперь нужно выровнять нижнюю часть облака. Для этого воспользуйтесь инструментом "Прямоугольник" установив ширина: 90 пик.; высота: 30 пик;
Далее нужно объединить все слои с овальными фигурами в смарт-объект, но сначала нужно их выделить. Для этого кликаем мышкой по первому слою, затем зажимаем клавишу Shift и кликаем по последнему слою с фигурой. Нажимаем правой кнопкой мыши по выделенным слоям и выбираем "Преобразовать в смарт-объект".
Сделайте дубликат смарт-объекта. Для этого нажмите Ctrl + J. Установите значение параметра Заливка: на 1%.
Перейдите на основной слой со смарт объектом, с помощью трансформации немного уменьшите фигуру. Для этого откройте вкладку Редактирование - > Трансформирование -> Масштабирование или нажмите сочетание клавиш Ctrl+ T.
Теперь объедините эти два смарт объекта в один смарт объект. Как это сделать было написано выше. Назовите данный слой "Облако".
Поздравляю векторная иконка облака создана. Но мы создаем иконки для сайта. Поэтому добавим внутрь облака дополнительную иконку, которая будет отражать смысл при клике на нее..
Шаг 2: Добавление иконок
Воспользуйтесь инструментом "Произвольная фигура". Установите основной цвет "Белый". Кликнув правой кнопкой мыши по документу у вас откроется диалоговое окно, где нужно выбрать будущую иконку. Я выбрал фигуру "Почта", которая подразумевает страницу с формой обратной связи.
Итоговый результат: Набор векторных иконок в форме облака
Для создания массового набора иконок, просто сделайте дубликат смарт объекта и размещайте внутри него другие фигуры. Получится примерно следующий набор иконок:
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-дизайн разработан не только для того, чтобы радовать глаз, он еще и полезен с практической точки зрения. Поэтому, можно убить сразу нескольких зайцев разом.
