Красивый рабочий стол на iPhone: как создать свои виджеты и изменить иконки в iOS?
Оглавление
- 1 На заметку
- 2 Как изменить иконку любого приложения на iPhone?
- 3 Как создать собственные виджеты на iPhone?
- 4 Идеи для вашего вдохновения и оформления рабочего стола
Виджеты и иконки Apple стали своего рода эталонным дизайнерским решением: чёткие линии, обтекаемые формы, красочные и без лишних слов понятные значки нравятся в том числе Android-пользователям. Да что там нравятся: они активно скачивают и устанавливают готовые наборы iOS-значков на свои устройства.
Но всё же многим примелькался стандартный вид иконок и виджетов. У отдельных экспертов по визуалу и вовсе пестрит в глазах – хочется эстетики, гармонии и единой стилистики. Поэтому сегодня мы покажем, как красиво и логично организовать рабочее пространство на вашем смартфоне в несколько простых шагов.
Сразу заметим: инструкция будет актуальна для пользователей iOS 14 и новее.
Прежде чем экспериментировать со своим девайсом, поищите вдохновение на сайте Pinterest. Там много интересных идей и готовых иконок для оформления домашнего экрана, скачать которые можно абсолютно бесплатно. Создайте отдельную доску для них – и тогда получите быстрый доступ ко всем наработкам.
Чтобы сэкономить время поиска изображений, воспользуйтесь нашими поисковыми подсказками: рабочий стол айфон, иконки для айфон, ios icon aesthetic, app store icon aesthetic и им подобные. Ещё в запросе можно уточнить цвет, который будет акцентным в изображении: например, youtube icon aesthetic green. Ведь если все иконки будут в одной стилистике, рабочий стол будет выглядеть более гармонично.
Избежать хаоса и беспорядка на рабочем пространстве поможет деление на блоки.
Например, на первом столе логично будет сохранить иконки часто используемых приложений и разграничить их тематически: например, можно объединить книги, заметки и планировщик задач; подкасты, музыку и кино; фото, видео, монтаж и обработку; такси, навигацию и поисковик и др. А всё, к чему не требуется быстрый доступ, разместить на следующих рабочих столах или и вовсе оставить в Библиотеке приложений.
Кстати, при выборе изображений не забывайте о логике и ассоциациях с этими приложениями. Это поможет быстрее к ним привыкнуть. Например, службу такси отлично проиллюстрирует машина, навигатор – карта или следы ног, банк – корзина для покупок или кошелёк.
Отобрав наиболее подходящие иконки, стикеры и фотографии, загрузите их в галерею своего iPhone и будьте готовы изменить свой рабочий стол до неузнаваемости!
Слева – стандартные виджеты и иконки iOS. По центру и справа – адаптированные. Хотите, мы покажем, как сделать так же?
Как изменить иконку любого приложения на iPhone?Для того, чтобы это сделать, дополнительно скачивать ничего не нужно.
Вам понадобится встроенное приложение «Команды», а ещё заранее подобранные для каждого приложения картинки и немного терпения.
1. В Библиотеке вашего iPhone найдите встроенное приложение «Команды». Нажмите синий значок плюса в правом верхнем углу или справа от меню «Начальные команды» – разницы не будет.
2. Вам откроется меню по созданию «Новой команды». Выберите действие «Открыть приложение». В следующем окне вам необходимо выбрать нужное приложение и точно так же назвать команду.
3. Далее нажмите на иконку «Поделиться» справа внизу экрана и выберите действие «Добавить на экран Домой». Переименуйте строку на название нужного приложения (в нашем случае это Instagram). Но не спешите нажимать «Добавить», иначе ваша команда отобразится на рабочем столе без иконки.
4. Остаётся присвоить команде новое изображение. Нажмите на иконку слева от названия: из предложенных действий коснитесь пункта «Выбрать фото». Найдите в галерее подходящее изображение из тех, что вы заранее скачали, и обрежьте его ровно по краям квадрата.
Нажмите «Добавить» и «Готово».
Вот таким не самым очевидным способом можно заменить стандартные иконки приложений на собственные. Это может быть любое изображение, даже ваше селфи. Недостаток у этого метода лишь один: при клике на такую иконку вверху экрана будет выскакивать двухсекундное push-уведомление о запуске приложения. Это связано с тем, что таким образом вы не меняете оригинальную иконку приложения, а только создаёте её копию со ссылкой на текущее приложение. Возможно, в будущих версиях iOS разработчики Apple уберут это ограничение.
Кстати, стандартные иконки лучше удалить с рабочего стола, чтобы избежать путаницы. Будьте внимательны: с экрана «Домой» нужно удалить только иконку, а не само приложение. Для этого на несколько секунд задержите пальцем иконку нужного приложения – и выполните следующие действия: «Удалить приложение» – «Удалить с экрана домой».
Чтобы создать собственное уникальное рабочее пространство, примените тот же механизм к другим приложениям, которыми вы пользуетесь чаще всего.
Не забудьте подобрать ещё и обои для рабочего стола: именно на нём разместятся ваши новые иконки. Как это сделать вы наверняка знаете, но мы всё же напомним: зайдите в «Настройки» – «Обои», там вы сможете выбрать фон для домашнего экрана.
Как создать собственные виджеты на iPhone?Помимо иконок, на экране можно размещать также виджеты. Это более крупные
информационные окна, которые открывают доступ к некоторым приложениям: Календарю, Почте, Заметкам, Погоде, Музыке и др.
Мы хорошо помним те времена, когда виджеты ещё нельзя было размещать на экране так, как хочется. А сегодня мы говорим о создании собственных в популярном среди пользователей приложении Widgetsmith. Они замечательно украсят ваш рабочий стол и выведут на экран время, дату, погоду, напоминания, показатели здоровья, ваши фотографии. Давайте прямо сейчас попробуем создать виджет?
1. Сперва нужно выбрать размер виджета, который вы хотели бы создать: нажмите на него, чтобы задать настройки.
Пользователям Widgetsmith доступны три размера: маленький, средний и большой.
2. Далее выберите тип виджета: фото, альбом, календарь и др. Мы хотим создать календарь среднего размера (Medium). Находим его в списке в разделе Widget и переходим к настройке шрифта, цвета, фона и др. Когда закончите, сохраните данные.
3. Таким же образом можно создать маленький виджет из любого изображения в вашей галерее (Small). Выберите размер виджета, тип Photo и загрузите снимок из библиотеки. Сохраните. Созданный виджет отобразится вместе с другими созданными вами виджетами.
4. Чтобы добавить виджет на рабочий стол iPhone, выйдите из приложения Widgetsmith и вернитесь на главный экран. Задержите на несколько секунд палец на экране, а затем кликните на значок плюсика в левом верхнем углу. Найдите в списке доступных приложений, которые можно добавить на рабочий стол в качестве виджета, Widgetsmith. Выберите его, найдите созданный вами.
Единственный нюанс заключается в том, что под такими виджетами всегда будет отображаться название приложения, в котором они сделаны.
Но согласитесь: это не большая плата за те возможности, которое Widgetsmith предоставляет пользователям. Только посмотрите, как красиво и гармонично выглядят домашний экран и экран блокировки с новыми иконками и виджетами в едином стиле!
Будьте в курсе всегда!
Подпишитесь на рассылку и узнавайте первым о новых акциях и спецпредложениях магазина!
EmailВаш email
NameВаше имя
Дизайн иконок в Figma | Дизайн в жизни
Обновлено: 23.03.2021
Иконки, значки, пиктограммы – неотъемлемая часть дизайна сайтов и мобильных приложений. Они быстро объясняют пользователю смысл каждого блока. Мы часто даже не читаем надписи под иконками, потому что их визуальная часть нам и так понятна. Существуют целые направления дизайна, где занимаются именно иконками. Сегодня мы поговорим о том, откуда брать иконки для своих проектов в Figma и продолжим создавать дизайн приложения Proper Nutrition.
Получить иконки для своего дизайна можно несколькими способами. Обо всех мы поговорим в статье.
Содержание
- 1. Использование готовых библиотек компонентов с иконками
- 2. Использование плагинов с иконками в Figma
- 3. Использование иконочных шрифтов в Figma
- 4. Рисуем собственные иконки в Figma, пример – иконка wifi из фигур
- 5. Дизайн иконок для Status Bar приложения Proper Nutrition
- 6. Дизайн иконок для меню tab bar в приложении Proper Nutrition
Самый простой и быстрый способ – использовать то, что создали другие дизайнеры.
Если вы загляните в раздел Community, то найдете огромную библиотеку готовых решений от профессионального сообщества дизайнеров Figma. Вы так же можете стать его частью и внести свой вклад.
Здесь вы найдете не только документы с наборами иконок в едином стиле и для разных устройств, но и готовые проекты с дизайном сайтов и мобильных приложений, которые вы можете взять за основу собственного дизайна.
А также UI Kit – библиотеки готовых наборов компонентов для интерфейса, выполненных в едином стиле. Они могут включать уже разработанный дизайн кнопок, выпадающих списков, иконок, стилей заголовков и так далее. Это существенно экономит время дизайнеров.
Вы можете разработать свою библиотеку готовых компонентов, ну а пока ее нет, пользуйтесь результатами труда других авторов, которые, к слову сказать, есть как платные, так и бесплатные.
Щелкните на название понравившегося набора и напротив его названия вы найдете кнопку Duplicate. После ее нажатия, файл скопируется в ваш раздел Drafts.
Теперь откройте скопированный документ (у меня это бесплатный coolicon), и посмотрите, как организовано его содержимое.
На вкладке Layer вы увидите список фреймов, с входящими в него иконками. Каждая иконка – это компонент.
Если вы еще не узнали, что такое компонент из видео урока, который я рекомендовала посмотреть в статье «Первое знакомство с Figma», то напомню.
Компонент в Figma – это элемент дизайна, который можно использовать многократно. Например, меню приложения. Достаточно нарисовать его один раз, объединить все слои в компонент и использовать его копии для всех экранов. В случае если нужно будет внести какие-то изменения, это нужно будет сделать только с самым первым экземпляром, который будет считаться родительским. Остальные же (дочерние) изменятся автоматически.
Для того, чтобы компоненты (в данном случае иконки) можно было использовать в разных файлах, их нужно сделать публичными или, как говорят, сквозными.
Для этого в левом меню на вкладке Assets со списком всех компонентов нажмите на кнопку TeamLibrary (библиотека команды).
После этого откроется окно с названием нашего файла с иконками-компонентами, которые мы можем опубликовать, нажав на кнопку Publish и списком всех уже опубликованных (сквозных) элементов.
Но, радоваться рано.
Если вы нажмете на кнопку Publish, появится сообщение о том, что нужно создать команду, чтобы опубликовать компоненты. Когда вы создадите команду и снова вернетесь к библиотеке документа, то увидите, что ничего не изменилось. А все, потому что функция публикации компонентов доступна только в платных тарифах Figma.
Совет! Есть только один способ использовать иконки и другие компоненты сторонних дизайнеров в бесплатной версии Figma. Найдите проект, который максимально подходит по набору компонентов для вас. Дублируйте его в свои черновики и работайте прямо в нем. Создайте страницу (Page) со своим проектом, тогда все объекты из других страниц будут так же доступны для вас.
2. Использование плагинов с иконками в Figma
Второй способ — плагины, так же экономит время дизайнеров.
Плагины в Figma — это специальные расширения программы, разрабатываемые участниками профессионального сообщества дизайнеров и программистов.
Они призваны увеличить возможности Figma, чтобы сделать ее еще более удобной и популярной. Их функционал разнообразен – от визуализации графиков и создания анимации до библиотеки готовых иконок.
Для того, чтобы установить плагин выполните следующие действия:
- Вернитесь на главный экран Figma (Menu – Back to files)
- Перейдите в раздел Community, где хранится список всех плагинов и UI Kits от пользователей.
- Перейдите в раздел Plugin и найдите подходящий вариант, например, Icons8 Free Icons. Напротив его названия в найденном списке или на странице плагина нажмите клавишу Install.
Сразу произойдет установка плагина. Напротив названия появится кнопка Uninstall с помощью которой можно будет его удалить.
Теперь вернитесь к вашему документу и в пункте меню Menu — Plugins вы найдете только что установленный Icon8. Щелкните по названию и откроется диалоговое окно плагина с библиотекой иконок.
Ищите необходимые варианты и вставляйте их в свой дизайн. Лучше использовать SVG формат, но в данном плагине он доступен в платной версии. Подробнее о преимуществах SVG читайте в статье «Экспорт из Photoshop в SVG».
В других вариантах плагинов иконки в SVG формате могут быть бесплатны, так что ищите подходящий вариант.
3. Использование иконочных шрифтов в FigmaВ Figma нет готового набора иконок, но можно использовать иконочные шрифты, например, FontAwesome.
С помощью инструмента Text создайте текстовый блок во фрейме и на панели свойств в разделе Text выберите шрифт Font Awesome
Перейдите на официальный сайт шрифта Font Awesome. Выберите подходящую иконку, щелкните по ней левой клавишей мыши и скопируйте в буфер.
Затем вернитесь к вашему текстовому блоку и вставьте туда иконку. Размер иконки, ее цвет, регулируются так же на панели свойств Text.
4. Рисуем собственные иконки в Figma, пример – иконка wifi из фигурСамый трудоемкий способ – это рисовать иконки самостоятельно с помощью фигур, шейпов.
На нескольких примерах разберем, как создаются простые иконки в Figma.
Если вы хотите создавать оригинальный дизайн иконок, советую вам ознакомиться со статьей, описывающей 7 принципов дизайна иконок.
Давайте нарисуем иконку сети wifi в Figma и заодно познакомимся с особенностями работы с фигурой Ellipse
Нарисуйте эллипс размером 40х40 px, зажав клавишу shift, чтобы сохранить пропорции. Наведите на него указатель мыши, и вы увидите круглую точку arc, потянув за которую вы измените свойство sweep (развертка) и получится пайчарт.
На нем вы увидите уже две точки sweep (развертка) и start (начало угла разворота). Подберите их значения так, чтобы получился вот такой значок. Причем это сделать можно как вручную, так и на панели свойств. Потяните центральную точку вверх и получится дуга. При этом на панели свойств изменится свойство Ratio.
Теперь ниже нарисуйте еще один эллипс, так, чтобы его окружность точно входила в пространство под нашей первой дугой.
У меня получился размер 32х32 px. Используя те же самые свойства получите вторую дугу.
Повторите все тоже самое с 3-м эллипсом (у меня получился 20х20 px), но не создавайте дугу, а оставьте треугольный сегмент (Piechart).
Затем выделите все эллипсы и установите закругление краев на 1 в панели свойств.
Для того, чтобы размер иконки ограничивался его видимой частью, а не размером первоначального эллипса (40х40 px), примените к трем выделенным элементам булеву операцию Union (объединение). Более подробно о ней я писала в статье «Рисуем дизайн первой страницы приложения в Figma». В результате данной операции на панели Layer появится новый слой Union. Переименуйте его в wifi.
Для того, чтобы можно было использовать нарисованную иконку wifi во всех фреймах нашего проекта в Figma, преобразуйте его в компонент. Кратко о том, что такое компонент я писала выше и еще более подробно мы будем рассматривать это в следующих статьях.
Для этого нажмите на кнопку с ромбом на верхней панели инструментов или в контекстном меню нашей иконки выберите пункт Create Component.
Панель слоев будет выглядеть следующим образом.
Иконка готова и это будет родительский компонент, изменение которого приведет к таким же изменениям его копий.
5. Дизайн иконок для Status Bar приложения Proper NutritionТеперь вернемся к приложению Proper Nutrition и создадим иконки для Status Bar. Это будет примерный дизайн, так как у каждого девайса он свой. Нам главное, показать какое место в дизайне экранов он будет занимать.
В документе Proper Nutrition создадим новый фрейм для Iphone 8 и назовем его MainScreen. Это будет главный экран нашего простого приложения. Описание всех экранов смотри в статье «Рисуем дизайн первой страницы приложения в Figma»
Для данного фрейма зададим сетку Grid с ячейкой 8px
С помощью инструмента Shape Tool – Rectangle (R) нарисуйте белый прямоугольник по всей ширине экрана, высотой 44 px (обычная высота для status bar).
Размеры фигуры можно задать вручную на панели Design или растягивать ее, ориентируясь на цифры внизу прямоугольника.
Назовите слой status bar
Для нарисованного прямоугольника задайте ограничители Left and Right — Top.
Теперь займемся иконками. Будем использовать иконочный шрифт. В нашем случае это самый простой способ. Надпись со временем сделайте с помощью обычного текстового блока. У меня это шрифт Roboto в 13px. Для данных иконок выставите ограничители:
- Иконка батареи – Right – Top and Bottom
- Иконка wifi — Right – Top and Bottom
- Время — Left – Top and Bottom
Выровняйте иконки по центру прямоугольника status bar с помощью соответствующих кнопок на панели Design.
Выделите прямоугольник Status Bar со всеми иконками и преобразуйте их в компонент, который назовите так же Status bar.
6. Дизайн иконок для меню tab bar в приложении Proper NutritionТеперь, используя те же самые шаги создадим дизайн иконок для нижнего меню приложения.
Там будут следующие кнопки с иконками (слева направо):
- Возврат к главной странице.
- Открытие списка избранного.
- Добавление в избранное
- Поиск по рецептам
- Оставить заметку (комментарий)
Нарисуйте прямоугольник высотой 60 px, шириной во весь экран.
Над ним нарисуйте линию (Line) с цветом (stroke) — # 949494
С помощью иконочного шрифта создайте иконки «Возврат к главной странице», «Открытие списка избранного», «Поиск по рецептам», «Оставить заметку». Размер – 24px.
Для созданий кнопки «Добавление в избранное» выполите следующий порядок действий:
Нарисуйте прямоугольник ширина (W) – 48, высота (H) – 30, закругление краев — 3
Залейте его градиентом (Fill – Linear) из красного (#DA0100) в оранжевый (#DA6900), прозрачность 100% в обоих случаях.
С помощью инструмента Text напечатайте «+» по середине прямоугольника, шрифт Comfortaa, размер 24. Установите у него следующие параметры – Fixed Size и Align Centr, чтобы символ всегда оставался в центре кнопки и фиксированного размера при любом изменении ее ширины.
Выделите прямоугольник и знак «+», преобразуйте их в компонент и назовите его Button/add favoriets.
Теперь выделите все иконки и кнопку и выберите для них стиль выравнивания Tidy up, чтобы расстояние между ними стало равным.
Выделите все нарисованные иконки и элементы для status bar и преобразуйте их в компонент с названием status bar.
В этой статье мы рассмотрели 3 способа создания иконок в проектах Figma. Выбирайте тот, что является самым удобным для вас.
Следующая статья из цикла по разработке приложения Proper Nutrition — это «Дизайн приложения в Figma — стили и маски«. В ней вы узнаете еще один способ поместить растровое изображение в Figma, а так же как работать с масками и стилями.
Подписывайтесь на обновления блога «Дизайн в жизни» по e-mail или социальных сетях и мы обязательно опубликуем для вас еще больше полезных статей из мира дизайна и веб-дизайна |
Как сделать иконки Pixel Perfect
Дизайн, Как, Иконки – ЧТЕНИЕ 2 МИН
Дизайн, Как, Иконки – 2 МИН ЧТЕНИЕ
Недостаточно нарисовать иконку, которая радует глаз.
Сделать значок масштабируемым , отзывчивым и подходящим для многих устройств , это то, что важно, если вы хотите, чтобы кто-то купил/использовал ваши значки. Это требует много размышлений и опыта, и это то, что у нас есть. Так что настройтесь, и мы научим вас создавать пиксельные значки.
Спойлер: в конце поста также добавлен видео-урок, показывающий все шаги.
Работать будем в Adobe Illustrator. Начните с изменения параметра « Gridline every» на 1 пиксель в Preferences -> Guides & Grid :
Также откройте меню View и нажмите Snap to Grid и Show Grid.
Есть 6 ключевых факторов, которые определяют, является ли ваша иконка идеальной по пикселям:
- Ширина хода
- Внутренние элементы
- Кривые Безье
- Количество деталей
- Перспектива
- Масштабирование
Ширина обводки
Линейный значок может потерять свою резкость, если ширина обводки не связана с пиксельной сеткой.
Значок видеозвонка от Icons8
Как выбрать ширину обводки? Всегда старайтесь использовать четные числа (2 пикселя, 4 пикселя и т. д.). Вы также можете использовать нечетные числа, просто следите за тем, как они выровнены по сетке.
Внутренние элементы
Внутренние элементы значков могут быть искажены, если они не выровнены по размеру значка. Например, если круг имеет четный радиус, скажем, 20 пикселей, элемент внутри также должен быть четным, например. 2 пикс.
Значок высокой важности от Icons8
Кривые Безье
Вы можете точно настроить векторные пути, чтобы края оставались чистыми.
Иконки с изображением уток от Icons8
Количество деталей
Иконка от Webalys
Имейте в виду, что значок с большим количеством мелких деталей может выглядеть как размытое пятно при изменении размера значка. Поэтому всегда разрабатывайте значки с учетом определенного размера.
Чтобы решить эту проблему для наших иконок в стиле Office, мы рисуем каждую иконку в 4-х вариантах для любого экрана (16x16px и 30x30px адаптированы для стандартных дисплеев, 40x40px и 80x80px — для retina).
Весенняя иконка от Icons8
Перспектива
Линии под углом более размыты. Для маленьких иконок вообще избегайте перспективы, предпочтительнее плоский стиль.
Масштабирование
Остерегайтесь полупикселей. Если вы делаете несколько размеров одного и того же значка, каждый размер может потребовать настройки после масштабирования.
Посмотрите полное видео, в котором наш дизайнер Маргарита шаг за шагом проведет вас через процесс:
Кроме того, приглашаем ознакомиться с контрольным списком по дизайну иконок для графических дизайнеров, проверить 6 искушений дизайнера иконок и прочитать, что такое favicon и почему это важно
дизайн процесс проектирования советы по дизайну инструменты дизайна + 14
Как создать свои иконки для Windows?
В этой статье содержится информация по следующим темам: • Создать значок Windows из существующего изображения • Создание значков в стиле Windows с использованием объектов изображения |
В этом разделе мы рассмотрим, как создавать значки Windows.
стандартная винда значки теперь включают следующие форматы изображений (серые форматы необязательны):
| 256×256 — RGB/A | 64×64 — RGB/A | 48×48 — RGB/A | 32×32 — RGB/A | 24×24 — RGB/A | 16×16 — RGB/A |
| 256×256 — 256c | 64×64 — 256с | 48×48 — 256с | 32×32 — 256c | 24×24 — 256c | 16×16 — 256c |
| 256×256 — 16с | 64×64 — 16c | 48×48 — 16c | 32×32 — 16c | 24×24 — 16c | 16×16 — 16c |
Проблема в том, что если просто сделать иконку и сохранить ее в стандартном для Windows XP формате ICO, результирующий файл будет весить около 400Кб на диске.
Чтобы получить больше информации о значках Windows, мы рекомендуем вам прочитать этот раздел: Знакомство с значками Vista
Создание значка Windows из существующего изображения
Ниже приведено пошаговое руководство по созданию сжатого значка Windows. с помощью Axialis IconWorkshop. Вы можете скачать 30-дневную пробную версию IconWorkshop здесь.
1. Создайте версию изображения значка размером 256×256 с помощью любого графического/векторного редактора. Сохраните свою работу с плавной прозрачностью (альфа-канал 32 BPP), используя формат файла, совместимый с Axialis IconWorkshop: BMP, PNG, JP2000, PSD.
Вы также можете перевести
свою работу из Adobe Photoshop® с помощью подключаемого модуля переноса Axialis (см.
этот учебник) или вы можете создать значок, собрав несколько объектов изображения (см. этот учебник).
В этой процедуре мы будем использовать этот файл: down.png (мы рекомендуем вам скачать его и сохранить на диске — щелкните правой кнопкой мыши и выберите «Сохранить объект как»). Вы также можете найти файл
2. Запустите Axialis IconWorkshop и открыть файл изображения. Он загружается в окно документа изображения, а не в значок окно редактора, как показано ниже ():
3. Если масштаб-1:1
окно предварительного просмотра не в режиме 256×256, изображение предварительного просмотра будет обрезано.
Рекомендуется переключиться в режим предварительного просмотра 256×256, если вы хотите
для работы с Windows 256×256
иконки. Чтобы переключиться в этот режим, щелкните правой кнопкой мыши в окне предварительного просмотра, появится меню
открывается.
Используйте тот же метод, чтобы вернуться к предыдущему состояние: выберите «Дисплей 128×128», удалите опцию «Плавающее окно» и используйте мышь для стыковки окно.
4. Выберите весь образ. Выберите Редактировать/Выбрать все или нажмите Ctrl+A. Анимированный выбор прямоугольник теперь рисуется вокруг изображения.
5. Выберите «Файл/Создать значок Windows® из выбранного». или нажмите «Я». Большой открывается диалоговое окно. Это диалоговое окно позволит вам создать все образы форматы, которые вы хотите включить в свою иконку, одним простым шагом:
6. Введите Имя проекта новой иконки (). По умолчанию предлагается корень файла изображения.
7. Выберите
форматы изображений для включения в значок (), щелкнув значок
картинки. Для создания окна
значок, рекомендуется следовать инструкциям Windows
спецификации, указанные выше.
8. Создать полностью совместимая Windows icon, вам нужно будет сжать форматы 256×256 в PNG. Выберите связанный вариант ().
9. Вы можете также выберите применение параметра сглаживания к цветным изображениям 256/16, как а также добавить эффект фильтра, чтобы сгладить / повысить резкость полученных изображений в Режим RGB/А (). Просмотрите результаты на изображениях для предварительного просмотра.
10. Когда закончите, нажмите ОК. Новый проект иконки созданный в окне документа:
11. Главная окно с сеткой () — это область редактирования, где вы можете ретушировать значок. Серая текстура в виде шахматной доски позади значка прозрачная часть значка (информация об альфа-канале сохранена). Предварительный просмотр в масштабе 1:1 отображается в соответствующем окне ().
12. Все
доступные форматы отображаются в списке ().
Вы можете выбрать
их для редактирования () или предварительного просмотра () их. См.
встроенная помощь приложения (нажмите F1)
чтобы узнать, как добавлять/удалять форматы или работать с этим проектом значков.
13. Сжатый формат (только форматы 256×256 могут быть сжаты) отмечены этим наложение PNG сжатого изображения: . Вы можете добавить/удалить эту опцию, выбрав Формат рисования/сжатого изображения (Windows Виста) или через нажав «К». Вы можете также используйте локальную панель инструментов или контекстное меню.
14. Когда закончите, сохраните значок, выбрав Изменить/Сохранить или нажав Ctrl+S.
К началу страницы
Создание значка в стиле Windows с использованием пакетов объектов изображений Axialis
Ниже приведено пошаговое руководство по созданию сжатого значка Vista с помощью Axialis IconWorkshop и пакетов объектов изображений Axialis. Для этого руководства требуются следующие компоненты:
• Axialis IconWorkshop 6.
• Пакет объектов «Реалистичные кнопки» Axialis (загрузить пробный пакет)
стандартная винда значки теперь включают следующие форматы изображений (серые форматы необязательны):
| 256×256 — RGB/A | 64×64 — RGB/A | 48×48 — RGB/A | 32×32 — RGB/A | 24×24 — RGB/A | 16×16 — RGB/A |
| 256×256 — 256c | 64×64 — 256с | 48×48 — 256с | 32×32 — 256c | 24×24 — 256c | 16×16 — 256c |
| 256×256 — 16с | 64×64 — 16c | 48×48 — 16c | 32×32 — 16c | 24×24 — 16c | 16×16 — 16c |
Самый большой формат изображения 256×256 XP (т.
е. RGB с альфа-каналом). Для достижения наилучших результатов мы начнем проект, используя этот новый формат, и будем работать с ним для сборки объектов. Когда закончите, мы создадим все остальные форматы, используя получившуюся графику 256×256 в качестве шаблона. Давайте создадим наш новый проект иконки:
1. Запустить Axialis IconWorkshop. Выберите File/New/Windows Icon Project или нажмите Ctrl+W . Откроется диалоговое окно:
2. Введите название проекта (): « Вниз «.
3. Теперь укажите формат первого изображения, добавляемого в проект: В Цвета выберите « XP с альфа-каналом (RGB/A 32 бита) » (). В Размер в пикселях выберите и » 256×256 (Vista) » ().
4. Поскольку мы хотим, чтобы формат 256×256 использовался в Windows, мы выберем его сжатие в виде специального файла PNG: Нажмите на опцию « Сжать формат Vista 256×256 » ().
5. Когда закончите, нажмите OK . Создается новое окно проекта значка ():
6. Если окно предварительного просмотра масштаба 1:1 не находится в режиме 256×256, изображение предварительного просмотра будет быть обрезанным. Мы рекомендуем вам переключиться в режим предварительного просмотра 256×256 для работы со значками Windows размером 256×256. Чтобы переключиться в этот режим, щелкните правой кнопкой мыши внутри окна предварительного просмотра, и откроется меню. Выберите » 256×256 Display «. Окно предварительного просмотра теперь выглядит так, как показано выше в « float mode » ().
Воспользуйтесь тем же методом, чтобы вернуться к предыдущему состоянию: выберите « 128×128 Display «, удалите « Floating» Окно » и используйте мышь, чтобы закрепить окно. Пришло время проявить творческий подход, который вы найдете легким и увлекательным с IconWorkshop.
Прежде чем мы начнем, не забывайте, что каждый шаг создания может быть отменить/повторить до 16 шагов ( Ctrl+Z/Ctrl+Y ).
7. В окне Librarian (выберите View/Librarian , если оно не отображается) выберите папку « Objects/Pack 2 — Realistic Buttons/Circle » (). Если пакет еще не установлен, загрузите и установите его с этой страницы. Список доступных объектов отображается в окне содержимого ниже (). Найдите файл « Background — Green.png » и выберите его ().
8. Когда закончите, используйте мышь Перетащите , чтобы добавить его в проект, как показано выше (). Объект добавляется в проект как плавающее выделение (). Посмотрите на качество изображения в окне Масштаб 1:1 ().
Поздравляем, вы только что добавили свой первый объект изображения в свой проект! Как видите, это очень интуитивно понятно. Теперь давайте продолжим и добавим другие объекты для создания значка.
ВАЖНО Чтобы выполнить следующие шаги, необходимо установить параметр « Сохранить прозрачность » (нажмите «T» или выберите Нарисовать/Сохранить прозрачность ). Если этот параметр не установлен, прозрачность не будет сохраняться при каждом добавлении нового объекта изображения, а уже добавленные объекты будут полностью заменены. |
9. В библиотеке выберите файл « Inner Glow 2 — Black.png » и добавьте его в проект тем же способом. Результирующее изображение теперь включает эффект красного света, как показано ниже:
10. Из библиотеки добавить в проект файл « Border 01.png «:
11. ‘. Выберите папку « Objects/Pack 2 — Realistic Buttons/Symbols » и добавьте в проект файл « Arrow Down.
png «: повысить реалистичность значка. В библиотеке выберите папку « Objects/Pack 2 — Realistic Buttons/Circle » и добавляем в проект файл « Glossy 04 .png «. Вот результат:
13. Последний штрих — тень под иконкой Добавим « Shadow Bottom 01 — Black.png «. Объект изображения по умолчанию помещается IconWorkshop на передний план. В нашем случае тень должна располагаться за иконкой. Функция позволяет это сделать в IconWorkshop: Нажмите на клавиатуре клавишу End . Теперь тень находится на заднем плане.0003
Готово! Полученное изображение должно выглядеть так:
Теперь, когда самое большое изображение готово (256×256 RGB/A), мы создадим из него все остальные форматы значков. Это делается за один шаг с помощью Axialis IconWorkshop Corporate Edition . При использовании Personal Edition вам необходимо создавать каждый формат вручную (дополнительную информацию см.
в файле справки по продукту).
14. Выберите Нарисуйте/добавьте несколько форматов изображения из этого изображения или нажмите « V «. Откроется диалоговое окно:
15. Выберите форматы изображений для включения в значок ( / ), установив соответствующие флажки. Следуйте спецификациям, которые мы определили выше для значков Windows. Не забудьте сжать форматы изображений 256×256 ()
16. Вы также можете применить параметр сглаживания к цветным изображениям 256/16, а также добавить эффект фильтра для сглаживания/резкости полученных изображений в RGB. /Режим (). Просмотрите результаты на изображениях для предварительного просмотра.
17. По завершении нажмите OK . Новые форматы автоматически создаются и добавляются в проект ():
18. Уделите минутку, чтобы полюбоваться своей работой 🙂 Нажмите на различные форматы () и увидите получившуюся иконку в масштабе 1:1 в окно предварительного просмотра ().
