Просто о создании сайтов и баннеров
Создание сайтов
2
В комментариях к своим статьям Как сделать иконку favicon.ico для своего сайта и Как сохранить иконку сайта favicon в Photoshop я столкнулся с распространенным заблуждением, что иконки для сайтов favicon необязательно сохранять в формате ICO. Достаточно сохранить иконку 16×16 в формате BMP, а затем просто изменить расширение изображения с BMP на ICO. И нет мол никакой разницы.
О том, что форматы ICO и BMP совершенно разные и отличаются не только расширением, я уже писал. Никто не запрещает погулить или почитать Википедию, чтобы в этом убедиться. Но бог с ней, с теорией. Давайте проверим на практике можно ли менять расширение картинки с BMP на ICO.
Прежде всего я решил сделать новую иконку favicon.ico и сохранить ее в форматах BMP и ICO с помощью Photoshop.
(далее…)
Подробные инструкции / Уроки Photoshop
16
Прозрачность в Photoshop – одно из ключевых понятий. Если вы только начали изучать Фотошоп и еще не знаете, как сделать прозрачным фон фотографии или как сделать часть рисунка прозрачной, этот небольшой урок с иллюстрациями будет для вас полезным.
Как сделать прозрачный фон в Фотошопе
Для того, чтобы сделать прозрачный фон на фото или рисунке, достаточно создать 2 слоя: нижний прозрачный фоновый слой и верхний видимый слой, на котором удалить ненужные участки изображения.
1. Открываем Photoshop. Открываем в нем картинку, которую нужно разместить на прозрачном фоне (File->Open…).
2.
Выделяем все изображение/фото (Ctrl+O).
3. Копируем выделенную картинку (Ctrl+C).
4. Открываем новый файл в Фотошопе (File->New… или Ctrl+N). В появившемся окне в самом нижнем выпадающем списке выбираем значение Transparent – «прозрачность»:
(далее…)
Создание сайтов
9
Для веб-дизайнера важно знать, что графика в интернете бывает двух типов: растровая и векторная. Она создается с помощью разных программ, иногда даже с помощью скриптов, но по своей сути изображение состоит либо из цветных точек, либо является совокупностью кривых линий.
Нет идеального графического формата. В то же время важно научиться использовать преимущества того или иного формата для конкретной задачи, минимизируя влияние его недостатков.
Растровые (точечные) изображения
К растровой графике, которой гораздо больше, чем векторной, относятся все картинки форматов JPEG, GIF, PNG, ICO, BMP.
Преимуществом растровой графики является то, что с ее помощью можно создать любой по сложности рисунок. При этом применять огромное количество фильтров и плагинов. Основным недостатком – растровую графику нельзя растягивать без потери качества. Большие рисунки нужно изначально рисовать большими, а фотографии делать с большим разрешением.
При увеличении размера файлов растровой графики теряется четкость изображения, становятся заметными отдельные пиксели, из которых состоит картинка. Самым популярным пакетом для обработки растровой графики является, конечно же, Adobe Photoshop (PSD).
Растровый формат GIF, позволяет создавать анимацию. Правда, она проще и дольше загружается, чем flash, зато сделать gif-анимацию, как правило, намного легче.
(далее…)
Уроки Photoshop
42
Если нужно создать иконку favicon.ico для своего сайта и нет желания скачивать и тем более платить за специальные программы по созданию иконок, можно обойтись только Фотошопом. К сожалению, даже версия Photoshop CS3
1. Скачиваем специальный плагин для Photoshop, который дает возможность сохранять файлы в формате ICO:
Скачать плагин для Фотошопа, который позволяет сохранять файлы *.ico
Плагин упакован в архив icoformat.rar, весит 7 Кб. В версии Photoshop CS и Photoshop CS3 этот плагин работает точно, в других версиях тоже должен работать, но я лично не проверял.
2. Устанавливаем плагин.
8bi в папку установки плагинов. Если вы устанавливали Photoshop CS3 в папку по умолчанию, то путь будет такой:C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\File Formats\
Все. Теперь достаточно перезапустить Фотошоп и можно сохранять файлы в формате ICO. Для этого, после создания своей favicon, нажмите Ctrl+Shift+S или File->Save As…:
Если вам нужна подробная информация, как установить иконку favicon на свой сайт, как ее сделать и для чего она вообще нужна, читайте статью Как сделать иконку favicon.ico для своего сайта.
Подробные инструкции / Создание сайтов
14
Иконка favicon.ico представляет собой крошечную картинку размером 16х16 пикселей, которая отображается рядом с адресом вашего сайта или блога в браузерах, в результатах поиска, в закладках и т. д. Обычно такую иконку делают из логотипа или фрагмента логотипа компании на фоне корпоративного цвета или любой другой символ, который дизайнер посчитает запоминающимся и подходящим для тематики сайта. Например, иконка favicon для этого блога — .
Сделать иконку favicon для своего сайта совсем не сложно, зато она сделает ваш сайт более узнаваемым. В последнее время у большинства сайтов есть такие иконки, потому не стоит ленится или недооценивать их значение. Тем более делается и устанавливается favicon быстро и просто. Я просто очень подробно описываю, как это сделать, потому много текста :).
Иконки favicon появляется рядом со ссылкой в результатах поиска, например, в Яндексе:
Иконки favicon отображаются перед адресом просматриваемого сайта почти во всех браузерах, в Избранном или Закладках браузера:
Теперь научимся делать такие иконки для своего сайта или блога. Для этого нам понадобятся программы Adobe Photoshop CS3 и AWicons Pro.
(далее…)
Секреты favicon.ico или как создать иконку для сайта в Photoshop — Da Diego
Вы хотите оригинальную и красивую иконку для вашего сайта? Сделайте её сами – в этом вам поможет данная статья.
Favicon (сокр. от англ. FAVorites ICON — «значок для избранного») – это специальная стандартная или пользовательская иконка маленького размера, которая находится слева от ссылки (URL) в адресной строке веб-браузера. Также такие иконки используются в закладках рядом с названием сайта, во вкладках браузеров или как ярлык для web-страниц на рабочем столе или других папках Windows. Под маленьким размером подразумевается 16 на 16 пикселей – стандартный размер для иконок данного типа. Основная цель такой иконки — сделать дизайн вашего сайта целостным и детализированным.
Все, что вам необходимо сделать, чтобы добавить иконку на сайт – это поместить готовый «favicon» в формате Windows Icon (. ico) в корневую папку вашего сайта. Большинство современных сайтов, за исключением Internet Explorer (IE), поддерживают использование иконок в формате GIF (включая анимированные варианты) и PNG (включая поддержку полной прозрачности фона), но так как абсолютно все браузеры, IE в том числе, понимают формат .ico, имеющий особенности, которые не дублируются в GIF и PNG, предлагаю ознакомиться именно с их созданием.
Системные требования
Так как мы будем создавать иконки в “Photoshop”, нам необходимо научить программу понимать расширение Windows Icon (ICO). Для этого нам потребуется специальный плагин экспорта формата файлов .ico, который можно бесплатно загрузить с Telegraphics. Плагин читает и записывает ICO-файлы в 1, 4, 8-битных индексированных и 24-битных RGB режимах, а так же читать и записывать 32-битные “ХР” иконки (с 8-битным альфа-каналом). Чтобы установить плагин, вам необходимо на сайте разработчиков выбрать подходящий вариант системы, распаковать скачанный архив и поместить в папку “x:\Program Files\Adobe\Adobe Photoshop CS5. 1\Plug-ins\File Formats\” (х = буква вашего диска, на который установлен Photoshop) файл с расширением “.8BI”, после чего запускаем или перезапускаем сам Photoshop.
Приступаем к созданию
Так как рабочая зона размером в 16х16 пикселей является недостаточно большой для удобной работы с изображением, лучше начать ваш проект с размером рабочей зоны хотя бы 64х64 пикселя (лучше использовать как можно большие размеры при создании иконок для более удобного выражения творческих идей, впоследствии изображение можно легко отмасштабировать с сохранением пропорций). Чтобы задать необходимые размеры рабочего поля необходимо выбрать в меню Photoshop пункт «File>New» или нажать сочетание клавиш Ctrl+N.
Дизайн иконки
Если у вас уже имеется готовый логотип большего размера, попробуйте уменьшить его до 16х16 пикселей и посмотрите, как хорошо он смотрится. Если при таких размерах логотип плохо различим и его графическая информативность невысока, создайте поле 64х64 пикселя и сделайте наипростейший дизайн иконки, который будет содержать основные цвета вашего сайта. Когда вы будете готовы протестировать готовый дизайн — выберите меню «Image>Image Size» или нажмите комбинацию клавиш «Alt+Ctrl+I» и задайте размер 16х16, выставив при этом режим интерполяции «Bicubic Sharper» (этот режим наилучший для уменьшения изображения и дает возможность оценить будет ваша иконка “размытой” при уменьшении или нет). В случае, когда изображение все-таки недостаточно четкое, вернитесь к исходному изображению и сделайте ваш рисунок более четким, насыщенными и/или контрастным, после чего заново отмасштабируйте вашу иконку.
Если вам кажется, что ваша иконка получилась не совсем такой, как вы хотели, продолжайте улучшать и видоизменять её до момента, когда она максимально будет похожа на вашу задумку. При работе с такими размерами этот процесс может занять у определенное время, прежде чем у вас все получится.
Сохранение и загрузка полученной иконки
Для сохранения полученного результата необходимо в меню выбрать пункт «File>Save As» или нажмите комбинацию клавиш «Shift+Ctrl+S» и задать обязательное имя файла «favicon. ico». В меню «Format» необходимо выбрать Windows Icon (ICO) из выпадающего меню. Этот формат будет доступен в Photoshop, только если вы скачали и правильно установили необходимый плагин и задали правильный цветовой режим при создании рабочего окна (1, 4, 8-битный индексированный или 24-битный RGB).
Следующим шагом будет размещение новой иконки в корневой папке вашего сайта. Для этого соединитесь с сервером, на котором находится ваш сайт, и закачайте туда созданный «favicon.ico». Этот файл необходимо обязательно поместить в папку, в которой находится домашняя (index.html) страница, а не в папку с изображениями или какую-либо другую папку, так как стандартным местоположением этого файла является именно корневая папка сайта. Если файл был правильно размещен (а его название точно «favicon.ico»), большинство браузеров автоматически распознают его.
Однако для некоторых браузеров необходимо указать прямую ссылку на иконку вашего сайта непосредственно в HTML-коде, а именно добавить ее в хедер каждой страницы, на которой необходимо разместить «favicon. ico»:
В большинстве современных тем для Joomla, WordPress и прочих движков используются отдельные файлы (например “header.php”), где достаточно прописать 1 раз эту строчку в начале файла и все страницы будут автоматически подхватывать указанные в них настройки. Также существует расширенный вариант написания данной строчки:
Если вы сомневаетесь, какой вариант подходит именно вам, пропишите обе строчки.
Не забудьте закачать отредактированные страницы обратно на сервер для отображения изменений в случае, когда изменения производились в локальной копии сайта.
Для использования иконки в формате GIF или PNG необходимо прописать следующие строчки:
или
Однако запомните, что оба эти формата не поддерживаются 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) обновить вашу страницу или очисть кэш браузера, или поставьте “?” в конце ссылки (например “http://diego.com.ua/?”) — это действие заставит думать браузер, что страница является новой и еще не была добавлена в кэш.
Еще одним способом решения этой проблемы является переход по прямой ссылке на ваш «favicon» (например: http://diego. com.ua /favicon.ico), после чего браузер (IE) немедленно отобразит и запомнит иконку.
Проблемы совместимости с браузерами
“Microsoft IE 6” (а также 7, 8 и 9) может не отображать “favicon” до тех пор, пока ссылка на вашу страницу не будет добавлена в избранное. В таком случае попробуйте следующий вариант – зажмите левую клавишу мышки на отображаемом “favicon” (обычно стандартная иконка IE), после чего “потрясите” его и отпустите. Данные действия приведут к перезагрузке страницы и обновлению иконки. Другим способом решения данной проблемы является добавление следующего кода в секцию “” страниц, на которых вы хотите видеть ваш “favicon”:
“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” для вступления в действие сделанных изменений.
Как сохранить файл .
ICO в Photoshop?Последнее обновление: 22 ноября 2022 г., 16:54
Если вы хотите сохранить файл .ico в Photoshop, вам нужно знать несколько вещей. Во-первых, файлы ICO в настоящее время недоступны в форматах файлов, существующих в Photoshop. Если вы планируете сохранить изображение или дизайн в виде файла .ico, потребуется подключаемый модуль.
Во-вторых, файлы ICO поддерживаются как в Windows, так и в Mac, поэтому не забывайте выбирать правильную операционную систему при загрузке подключаемого модуля файла .ico. Наконец, файлы ICO поддерживаются только в 8-битном и 32-битном цветовом режиме.
Если у вас есть какая-либо версия Photoshop и вы используете Windows, вы можете сохранить файлы .ico, выполнив следующие действия.
Сначала перейдите в папку «Загрузки» или в расположение файла, в котором вы сохранили загруженный подключаемый модуль файла .ico.
Откройте заархивированный файл, выберите файл плагина формата ICO, щелкните его правой кнопкой мыши, затем выберите «Копировать».
Затем перейдите в папку с приложением Adobe Photoshop, выбрав «Этот компьютер» > «Program Files» > «Adobe». Затем выберите папку Adobe Photoshop.
В папке Adobe Photoshop перейдите к строке поиска в правом верхнем углу и введите «формат файла», затем щелкните стрелку поиска. В результатах поиска выберите и откройте папку «Форматы файлов».
Оттуда вы можете увидеть существующие плагины форматов файлов в Photoshop. Щелкните правой кнопкой мыши пустое место в папке и выберите «Вставить».
Вы можете столкнуться с всплывающим окном с разрешением администратора, если это так, просто нажмите «Продолжить».
Теперь вы можете видеть, что формат ICO уже есть в доступных форматах файлов в Photoshop.
Затем перейдите в Photoshop, чтобы сохранить дизайн или изображение в виде файла .ico. В верхнем меню нажмите «Изображение» и выберите размер изображения.
Как видите, исходные размеры изображения составляют 480×480 пикселей, что не соответствует требованиям к размеру файлов ICO.
ПРИМЕЧАНИЕ: Размер может быть любым от 16×16 пикселей до 256×256 пикселей.
Измените размеры изображения с 480×480 пикселей на 256×256 пикселей, затем нажмите «ОК».
Теперь вы можете видеть, что размер изображения стал меньше.
Чтобы сохранить изображение в виде файла .ico, нажмите «Файл» в верхнем меню, затем выберите «Сохранить как…».
ПРИМЕЧАНИЕ. Вы также можете выбрать опцию «Сохранить копию…» в зависимости от ваших предпочтений.
Появится окно, в котором вы можете отредактировать имя файла изображения, а также выбрать расположение папки для сохраненных файлов и предпочитаемый тип файла. Для предпочтительного типа файла установите флажок рядом с «Сохранить как тип:».
Выберите формат файла .ico в раскрывающемся меню.
Убедитесь, что выбранный формат файла уже отражен, затем нажмите «Сохранить».
При сохранении появится всплывающее окно о формате ICO. Выберите «Стандартный ICO», затем нажмите «ОК».
Проверьте расположение папки, в которой вы сохранили изображение, для подтверждения. Найдите имя файла изображения. Здесь вы можете видеть, что существуют два файла с одинаковыми именами. Файл PNG — это исходный тип файла изображения, а файл ICO — это файл, сохраненный ранее в Photoshop.
СОВЕТ ПРОФЕССИОНАЛА: Если вы пытаетесь сохранить файл .ICO в Photoshop, вы можете потерять некоторые данные изображения в процессе. Обязательно сделайте резервную копию исходного изображения перед сохранением в виде файла .ICO.
После того, как вы сохранили файл ICO, вы можете использовать его в качестве значка для ярлыка на рабочем столе. Если вы хотите использовать файл ICO в качестве значка для ярлыка на рабочем столе, щелкните правой кнопкой мыши ярлык и выберите «Свойства».
На вкладке «Ярлык» нажмите кнопку «Изменить значок».
Найдите файл ICO.
Выбрав его, нажмите кнопку «Открыть».
После отображения выбранного файла выберите «ОК».
Проверьте правильность целевого ярлыка, затем выберите «Применить».
Теперь вы можете видеть, что значок был применен к папке быстрого доступа!
В заключение, если вы хотите сохранить файл .ico в Photoshop, убедитесь, что на вашем компьютере с Windows или Mac установлен подключаемый модуль. Убедитесь, что ваша глубина цвета находится в 8-битном или 32-битном цветовом режиме и что размеры вашего изображения находятся в диапазоне 16 × 16 пикселей и 256 × 256 пикселей. Наконец, перейдите в «Файл»> «Сохранить как», выберите формат ICO в качестве типа файла и нажмите «Сохранить».
Девопс женщина в торговле, технический исследователь и навигатор проблем.
Как создавать и сохранять файлы ICO в Photoshop
Автор Дэйв Леклер
Файлы
ICO полезны для системных значков и фавиконов веб-сайтов. Photoshop не может обрабатывать этот формат по умолчанию, но с помощью нескольких простых шагов он сможет это сделать.
Пробовали ли вы когда-нибудь сделать иконку в Photoshop — будь то фавикон для вашего сайта или иконка для программы на вашем компьютере? Как оказалось, редактор изображений Adobe не сохраняет файл ICO прямо из коробки, но это не значит, что вы не можете их создать! Вот как это делается.
Сначала зайдите в Telegraphics и загрузите файл ICO (Windows Icon) Format. Он доступен для Windows и Mac. Обязательно загрузите 32-битный или 64-битный файл, соответствующий вашей системе.
Затем распакуйте файлы в формате .ZIP в папку:
C:\Program Files\Adobe\Adobe Photoshop CC 2014\Подключаемые модули\Форматы файлов
Для меня папки File Formats не было в моей папке Plug-ins, и если у вас то же самое, просто создайте новую папку.
Теперь перейдите в Photoshop, создайте новый документ и выберите «Сохранить как». Прокрутите список форматов, и теперь вы должны увидеть .ICO в списке. Если он отсутствует, убедитесь, что ваш файл имеет размер 256 x 256 пикселей или меньше, поскольку формат ICO не поддерживает изображения большего размера.
Используете ли вы файлы ICO в Photoshop? Что ты сделал? Поделитесь с нами в комментариях!
Изображение предоставлено: Skylines через ShutterStock
Подписывайтесь на нашу новостную рассылку
Похожие темы
- Креатив
- Адоб Фотошоп
- Короткий
Об авторе
Дэйв Леклер — бывший писатель MUO, ранее работавший над новостями и видеоконтентом.