Безличный stats html
Вот что мы должны получить:
Иконки являются важной частью интерактивного и веб дизайна. Хотя иконки малы, их бывает очень сложно создать. В сегодняшнем уроке мы продемонстрируем, как создать иконку папки с использованием различных форм и рефлексов в 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 (Фильтр - Размытие - Размытие в движении). Уменьшите непрозрачность по своему вкусу.
Заключительный просмотр
Я надеюсь, вам понравился этот урок. Я добавил некоторые дополнительные значки, которые создал с использованием тех же методов.
Из этого туториала Вы узнаете, как создать значок для вашего сайта при помощи Photoshop .
Как создать значок сайта.ico при помощи PhotoshopЗначок сайта - это небольшой, но значительный элемент продвижения вашего бренда на сайте. Вот пример, того, как он может выглядеть на вашем сайте:
Photoshop - это прекрасная программа для работы с изображениями, которая поможет Вам создать пользовательский значок сайта.
Значок сайта - это миниатюрный логотип (16×16 ), который Вы можете использовать на сайте. Если Вам удобнее работать с изображением большего размера, Вы можете работать над значком, размером 64×64 пикселя, а затем его уменьшить.
Используйте инструмент ‘Масштаб’, для того чтобы увеличить документ для редактирования:
Например, мы создадим значок сайта, который состоит из простого градиентного фона и двух букв ‘TM’ (Торговая марка).
Примените к вашему документу инструмент ‘Градиент’ (Gradient Tool). Вы можете использовать одно из доступных сочетаний цветов, или создать новое сочетание цветов:
Используйте инструмент ‘Горизонтальный текст’ (Horizontal Type), для того чтобы добавить ваш текст. Задайте шрифт, цвет и размер шрифта:
Используя инструмент ‘Трансформирование’ (Ctrl + T) , отрегулируйте расположение текста:
Соедините слои (Merge layers), как это показано на скриншоте ниже:
-
Вы успешно создали значок сайта. Он был сохранён как файл ‘favicon .png’ на вашем компьютере.
Однако, значок сайта нужно сохранить в формате .ICO . Этот формат файла позволяет сохранить несколько изображений разных размеров для масштабирования. По этому, теперь Вам нужно конвертировать созданный значок сайта.PNG в формат .ICO . Это последний шаг данного туториала.
Откройте в браузере любой сайт конвертирования изображений. Мы воспользуемся этим сайтом .
Перетяните ваш файл ‘favicon .png’ в область ‘Загрузить’ (как это показано на скриншоте). Конвертирование начнётся автоматически. Процесс займёт 1 — 2 секунды:.ico’ на вашем компьютере.
Создайте новый документ Photoshop. Откройте вкладку меню ‘Файл’ > ‘Новый’ (‘File’ > ‘New’):
Это конец данного туториала. Вы успешно создали пользовательский значок для вашего сайта, используя программное обеспечение Adobe Photoshop. Теперь Вы можете загрузить значок сайта на ваш сервер.
Вы можете также ознакомиться с детальным видео-туториалом ниже.
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-дизайн разработан не только для того, чтобы радовать глаз, он еще и полезен с практической точки зрения. Поэтому, можно убить сразу нескольких зайцев разом.
В этом уроке вы научитесь рисовать простую иконку папки с документами в 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».
Вот так должен выглядеть ваш конечный результат.
Однако запомните, что оба эти формата не поддерживаются 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” для вступления в действие сделанных изменений.