Иконочный шрифт - Форум по Векторной Графике
|
Иконочный шрифт
|
| alekse11 | Дата: Вторник, 27.05.2014, 23:25 | Сообщение # 1 |
Группа: Человек
Сообщений: 252
Статус: Offline
| Ярослав, доброго времени суток. Не приходилось ли тебе создавать иконочный шрифт? Прочитала, что часто используют для этого Inkscape SVG Font Editor. Слышала, что можно тоже самое сделать в Иллюстраторе и потом использовать онлайн серверы для создания шрифта из готовых иконок. Какого размера должна быть сетка для иконки или размер не играет принципиальной роли? И вообще с какого конца к этому делу подходить?
Сообщение отредактировал alekse11 - Вторник, 27.05.2014, 23:26 |
| |
| | |
|
| alekse11 | Дата: Вторник, 27.05.2014, 23:29 | Сообщение # 2 |
|
Группа: Человек
Сообщений: 252
Статус: Offline
| И еще вопрос вдогонку: как делается, что маленькие иконки как будто вдавлены в поверхность, как здесь например?
|
| |
| | |
|
| alekse11 | Дата: Вторник, 27.05.2014, 23:34 | Сообщение # 3 |
|
Группа: Человек
Сообщений: 252
Статус: Offline
| А здесь как будто у них тень внутри.
|
| |
| | |
|
| lazun | Дата: Среда, 28.05.2014, 07:56 | Сообщение # 4 |
|
Группа: Администраторы
Сообщений: 2368
Статус: Offline
| 1. Не сталкивался с такой задачей - иконочный шрифт. Но интересно. Расскажи зачем это тебе (то есть, где используют), дай примеры.
2. Под иконку подкладывают белый контур и сдвигают на 1 - 2 максимум пикселей вниз. Для создания белого края
Для затемнения внутри иконки подкладывают более темный контур и сдвигают иконку вниз. Видимость сдвинутого контура ограничивают обтравочной маской по форме нижнего темного контура.
Понятно объяснил?
|
| |
| | |
|
| alekse11 | Дата: Среда, 28.05.2014, 14:29 | Сообщение # 5 |
|
Группа: Человек
Сообщений: 252
Статус: Offline
|
Да, я тоже сама не сталкивалась раньше, но 99designs просвещает  , такие вот запросы от клиентов. В общем, его используют для мобильных приложений и т д, преимущество в том, что в этом случае с иконками ты можешь легко делать те же самые вещи как и со шрифтом: поменять цвет, размер, наложить эффект и тому подобное, не открывая каждый раз Фотошоп или Иллюстратор. Вот пример, http://css-tricks.com/examples/IconFont/
Да,спасибо, ты очень понятно объяснил, я в общем так и думала, просто при маленьких объектах сдвиг белого контура даже на один пиксель, выглядит неопрятно, например острые углы не совпадают (ручками правлю их обычно, думала, может, еще какой способ есть) В таком случае, как лучше сделать: рисовать в большом размере, сдвинуть подложку и уменьшить всю картинку? А насчет обтравочной маски - это хорошая идея, спасибо!
Сообщение отредактировал alekse11 - Среда, 28.05.2014, 14:32 |
| |
| | |
|
| lazun | Дата: Среда, 28.05.2014, 18:27 | Сообщение # 6 |
|
Группа: Администраторы
Сообщений: 2368
Статус: Offline
| Цитата В таком случае, как лучше сделать: рисовать в большом размере, сдвинуть подложку и уменьшить всю картинку?
Нет, иконку лучше сразу рисовать в нужном размере. Если говорить про вектор, то да, немного повозится нужно. Но разве это проблема - поправить контур немного.
Можно и в Фотошопе постобработкой заниматься, если не нужен 100% вектор. Вообще, мне кажется, ты сильно аккуратничаешь. Если в натуральную величину иконка выглядит приемлемо, то не нужно ничего подчищать.
Для создания шрифтов (неважно каких, хоть и символьных) нужен специальный софт. Есть и бесплатные онлайн сервисы, хоть и ограниченные функционально, например http://fontstruct.com/. К сожалению, у меня нет такого опыта, хотя интересно.
|
| |
| | |
|
| alekse11 | Дата: Среда, 28.05.2014, 18:50 | Сообщение # 7 |
|
Группа: Человек
Сообщений: 252
Статус: Offline
| Большое спасибо за советы. Просто столкнулась с такой проблемой, рисуя иконки, сдвиг даже в один пиксель - великоват. Или я мельтешу слишком с иконками? И почему их лучше в натуральную величину рисовать ( я и раньше слышала мнение, что несмотря на утверждение, что вектор не теряет качества при изменении размера, на практике это не так. Но не знаю почему и в чем это выражается?) ? И какой должен быть размер иконок в "натуральную величину"? Если нужны минималистические иконки, для мобильных приложений например, в каком размере их лучше рисовать, в пиксельном режиме или в обычном?
И кстати, как посмотреть их в натуральную величину? На 100%? А разрешение экрана тоже ведь влияет или нет?
Цитата Для создания шрифтов (неважно каких, хоть и символьных) нужен специальный софт. Есть и бесплатные онлайн сервисы, хоть и ограниченные функционально, например http://fontstruct.com/. К сожалению, у меня нет такого опыта, хотя интересно.
Сообщение отредактировал alekse11 - Среда, 28.05.2014, 18:50 |
| |
| | |
|
| itt | Дата: Четверг, 29.05.2014, 04:31 | Сообщение # 8 |
|
Группа: Человек
Сообщений: 17
Статус: Offline
| Создание шрифтов,задача для людей не слабонервных,это целая отрасель приносящая хороший доход.В Вашем случае всё гораздо проще:требуется лишь векторый файл иконок в Иллюстатор,экспорт этих иконок в программу( http://fontlab-studio.soft32.com/free-do....de3sAng ),которая специально приспособлена для создания шрифтов.
|
| |
| | |
|
| alekse11 | Дата: Четверг, 29.05.2014, 04:37 | Сообщение # 9 |
|
Группа: Человек
Сообщений: 252
Статус: Offline
| Ясно, буду разбираться. Ужасно хочется все освоить и шрифты и иконки и еще кучу всяких интересностей, но времени катастрофически не хватает. Спасибо всем за советы
Сообщение отредактировал alekse11 - Четверг, 29.05.2014, 04:50 |
| |
| | |
|
| itt | Дата: Четверг, 29.05.2014, 04:41 | Сообщение # 10 |
|
Группа: Человек
Сообщений: 17
Статус: Offline
| В Иле создать шрифт невозможно в Корел запросто: http://corel.demiart.ru/index.php/category/tutorials/fonts/
|
| |
| | |
|
| alekse11 | Дата: Четверг, 19.06.2014, 03:16 | Сообщение # 11 |
|
Группа: Человек
Сообщений: 252
Статус: Offline
| Цитата lazun (  ) Для затемнения внутри иконки подкладывают более темный контур и сдвигают иконку вниз. Видимость сдвинутого контура ограничивают обтравочной маской по форме нижнего темного контура  Заранее спасибо огромное!
Сообщение отредактировал alekse11 - Четверг, 19.06.2014, 03:17 |
| |
| | |
|
| lazun | Дата: Четверг, 19.06.2014, 10:48 | Сообщение # 12 |
|
Группа: Администраторы
Сообщений: 2368
Статус: Offline
| Если нужен чистый вектор, то блендом. Нижний объект, например, темно серый. Верхний объект белый - его и сдвигаем. Теперь применить к бленду Muliply. Отрегулировать интенсивность серого цвета при необходимости. Ограничиваем видимость бленда обтравочной маской
Если иконки растровые, то подфотошопить
|
| |
| | |
|
| alekse11 | Дата: Пятница, 20.06.2014, 01:06 | Сообщение # 13 |
|
Группа: Человек
Сообщений: 252
Статус: Offline
| Ярослав, спасибо что отозвался, да, иконки векторные. Но все еще не дощло до меня как надо сделать: сама иконка имеет градиент от темно-серого к светло-серому. То есть я рисую иконку с основным градиентом. Потом делаю сверху бленд. А как обтравочную маску сделать, чтобы эта тень только по краю шла и не перекрывала ниже лежащую форму? Не знаю, как на словах объяснить. Сейчас прицеплю что-нибудь наглядное.
Вот что-то такое надо сделать более "вдавленно"
Сообщение отредактировал alekse11 - Пятница, 20.06.2014, 01:12 |
| |
| | |
|
| lazun | Дата: Пятница, 20.06.2014, 16:01 | Сообщение # 14 |
|
Группа: Администраторы
Сообщений: 2368
Статус: Offline
| У меня небольшие проблемы с форумом - я не получаю мгновенные сообщения о новых постах, поэтому реагирую с запозданием. Пришли мне лучше файл. Я постараюсь завтра сделать внутреннюю тень - сегодня у дочки День рождения 
|
| |
| |
|
