Я люблю иконки!

блог Кондратьевой Анны

Разработка сайта — htmlman

Блокировка слоев в Photoshop

Фишка из области «спасибо кэп», но тем не менее напишу — вдруг кто не знает:)
Есть в панели слоев вот такой вот набор иконочек.


Они, как ясно из комментария, могут так или иначе заблокировать слои. Использовать их можно как по одному, так и несколько сразу.
Я хочу рассказать, в чем именно их разница.

Продолжить чтение

Как рисовать иконки

Потерялась моя старая запись, восстанавливаю.
Это довольно уже старенький урок по тому, как рисовать маленькие и правдоподобные иконки тортиков. В этой технике был выполнен весь сет «Mmm, so sweet!». Рисовать такие штуки совсем несложно, а результат действительно выходит клевый:)

Урок по рисованию иконки из «Mmm, so sweet!»

Продолжить чтение

Подборка уроков техдизайна.

У меня на makepizdato.ru есть замечательная должность — когда к нам приходит новенький и местные решают, что его нужно впускать, появляюсь я и говорю свое  «кушать подано» «Подавайте заявку в профиле». Открою вам маленький секрет — на этом моя суперсила заканчивается и более я никак не влияю на судьбу новоприбывшего:)

Однако тем не менее ко мне частенько стучатся в личку ребята со всякими вопросами, касающимися вступления — обычно по поводу самих работ: какие подавать? а сколько? а что делать если нет работ? а где качаться? а есть ли какие-то уроки? а какие? а где?
Дабы помочь им разобраться с самыми первыми и самыми общими проблемами, мы составили небольшой F.A.Q., где расписаны способы подготовить себе приличное портфолио на вступление, ссылки на уроки, варианты тестовых заданий и прочие всякие полезные штуки.

Также я решила составить свой личный список ссылочек на классные уроки. Их пока совсем немного (я буду пополнять этот список постепенно), но эти работы я считаю достаточно интересными в плане выполнения и полезными в плане изучения инструментария и подходов в реализации какого-то эффекта.
И да — все ссылки идут на уроки в блогах непосредственных авторов. Не поленитесь полистать их — там может быть еще много замечательных туторов. Продолжить чтение

Не превращайте иконку в Библию.

Самое плохое, что может случиться с иконкой — это когда её фаршируют тайными смыслами как утку яблоками. Это не иллюстрация, и наивно думать, что найдется хоть один пользователь, котрый будет вдумчиво рассматривать и расшифровывать каждую нарисованную на иконке тряпочку, так что сразу оставьте эту прерогативу для гербов. А в иконке смысл может быть только один, но узнаваться должен с первого взгляда.

Так что гоните от себя соблазнительные мысли вроде  «А что если подложить снизу всего этого газетку и поставить рядом чашечку кофе — это будет символизировать работу в комфорте, а на сами иконки добавить ажурные тени — будто бы все происходит под сенью пальм!»
Это путь ведет к иконочной катастрофе.

Маленькие иконки

Лично я отношу к маленьким иконкам форматы от 12х12 до 64х64.
Обычно в силу небольшого размера они не используются в качестве центрального графического элемента (одна такая иконка на странице потеряется, несколько сольются в один смысловой блок и уже не будут оцениваться отдельно), но тем не менее, иногда с ними выходит больше возни, чем с любыми другими.

Прежде всего, перечислю самые популярные случаи использования мелких иконок:

  • в объемных меню или многопунктных списках разделов на сайтах;
  • в качестве сопроводительных, поясняющих иконок на сайтах (конвертик напротив емейла, домик напротив «Сделать стартовой» и т.п.);
  • в меню мобильных телефонов;
  • в программных интерфейсах, на «рабочих» кнопках, возле переключалок и маячков и т.п.;
  • в игровых интерфейсах;

Разумеется, список не полон, варианты применения таких иконок вообще очень разнообразные, но это — самые частые. И в принципе, они уже диктуют свои требования к иконкам, которые я свожу к двум главным, о которых часто забывают в погоне за красивой картинкой — интуитивная понятность и общий стиль.

Интуитивная понятность

Это на тизере 200х200 вы можете позволить полет фантазии и необычные метафоры, а 24-пиксельная кнопка «Вырезать» или «Отправить другу на емейл» должна быть понятна пользователю с полувзгляда. Да и геймеру во время напряженного боя будет некогда всматриваться, какое зелье у него лечебное, а какое — зелье маны.

Общий стиль

Нельзя забывать, что мелкие иконки практически никогда не используются по одной — их всегда много. И в этом случае их невероятно легко наплодить абсолютно разношерстными. В больших размерах все-таки больше способов найти для всех рисунков общие элементы, ракурсы, еще что-нибудь. А вот такие мелкие наборы частенько выглядят так, будто набраны из разных сетов — там мячик-«Интернет» получился с отличным обьемом, а вот клавиатура вышла просто эталоном пиксельарта.

Как работать именно на эти два фактора — вопрос индивидуальный, и каждый дизайнер решает его своими методами, коих придумано сотни и еще придумается сотни. Но я все-таки осмелюсь описать несколько приемов, используемых лично мною.

Продолжить чтение

Slice Tool и ещё немного о PhotoShop

Всех возможностей Фотошопа не знают, наверное, даже сами разработчики Фотошопа. Что уж говорить о его скромных пользователях, которые чаще всего в одиночку, методом тыка, осваивают этот редактор. И часто случается так, что многие дизайнеры после нескольких лет работы в ФШ продолжают делать для себя открытия в виде скромных галочек в настроечках какого-нибудь затерявшегося во вкладках фильтра или эффекта слоя.

Поэтому я и решила поделиться парой инструментов ФШ (если конкретнее — Slice Tool и волшебное «Windows-Arrange-New window for…»), очень облегающих и ускоряющих мою работу — вдруг для кого-то это будет полезным:)

Итак, кликаем по картиночке для привлечения внимания и ныряем под кат:)

Продолжить чтение

Создание иконки для iPhone

Привет, дорогие!
После долгого молчания хочу представить вам мой первый перевод — замечательную статью о рисовании иконок для iPhone. Её автор, Andrea Austoni — талантливый итальянский дизайнер, живущий и работающий в Кракове, Польша. Кстати, он же автор всех иконок в статье:)
Обязательно загляните на его сайт, cutelittlefactory.com – там можно почерпнуть очень много полезного и интересного:)
Thank you, Andrea!
За сим всё, слово автору:)

Операционная система iPhone, поддерживающая приложения и игры всех мастей — сбывшаяся мечта любого дизайнера иконок и интерфейсов.
В этой статье я опишу процесс создания иконок для этой платформы и опишу полный технологический процесс — от начального скетча до заключительной иконки во всех требуемых размерах
.

Продолжить чтение

Как рисовать пиксельные иконки

Каюсь, всегда побаивалась и старалась избегать работы с мелкими иконками, где каждый пиксель на счету. Но вот судьба свела меня и с такими:) Как оказалось, не всё так ужасно, как мне представлялось, главное — знать несколько основных приёмов.

То ли действительно не существует в русскоязычном интернете уроков по теме, то ли я просто не умею гуглить, но в итоге и эти правила мне приходилось выводить самостоятельно, воюя с карандашом в фотошопе и изучая под восьмикратным зумом все понравивишиеся 16-пиксельные иконки.
Продолжить чтение