Pixelgene - Ресурсы для веб-дизайнеров. Freebies. Журнал о веб-дизайне

Подборки свежих freebies, мокапы(mock-up), шрифты, иконки, psd, wordpress, статьи о веб-дизайне, лайвхаки для дизайнеров.

  • Freebies
  • Шрифты
  • Статьи
  • WordPress

  • Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    — Сам записывает клиентов и напоминает им о визите;
    — Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    — Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом
  • Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта


Тэги #

3D AI App Background Branding CSS e-commerce Font Framework HTML Icons JS Landing Mock-up Patterns PSD Retro SVG UI WordPress Веб-сервис Портфолио Статья Тема Типографика Урок Шрифт

14 советов по быстрому созданию интерфейсов в Adobe Illustrator (часть первая)

18.03.2014 3 комментария

Speed_diz14 советов от известного Дизайнера и разработчика Vincent Le Moign который является создателем такого крутого проекта как Fontastic. В этой статье Vincent поделился с нами как можно быстрее и качественее работать в Illustrator.

1. Динамичные кнопки

dynamic
Сэкономь свое время создавая кнопки с динамичными стилями! Просто создай динамичный стиль и применяй его к любому тексту который должен быть кнопкой. Динамичная кнопка увеличивается в зависимости от текста внутри при этом поля остаются неизменными.
И так сперва выдели любой текст который ты приготовил для кнопки. Затем в панели Appearence добавь 2 Fill layers.
dynamic_A
Организуйте слои(Fill layer) так чтоб слой Characters оставался между ними как на изображении ниже.
dynamic_B-2
Выбери нижний Fill layer. После нужно нажать в панели Appearence Fx > Convert to Shape > Rectangle.
dynamic_C-1
Теперь можно выбрать необходимые значения полей по вертикали и по горизонтали изменяя значения Extra Width и Extra Height. Если нужна кнопка со скругленными углами нужно выбрать Rounded Rectagle.
dynamic_D
И так теперь у нас верхний Fill layer меняет цвет текста, а нижний цвет самой кнопки.
dynamic_E-1
Динамичная кнопка готова!

2. Текстовые стили

Применяйте сложные стили обзацев в один клик! Используйте панель Paragraph Styles чтобы быстро задавать вашему тексту нужный шрифт, цвет, выравнивание, разрядку итд. Создайте абзац необходимого вам вида и выделите его, после чего нажмите Window > Type > Paragraph Styles и нажмите Create New Style, назавите свой стиль(например: Arial_14px_#666). Теперь выбрав любой абзац нажмите на ваш созданный стиль и он примет нужный вид. Этот метод позволяет контролировать вашу типографику как CSS.
styles

3. Глобальные цвета

Adobe Illustrator позволяет глобально изменять цвета объектов! Откройте панель Window > Swatches и создайте несколько цветов которые вы собираетесь использовать в своей работе и применяйте их к объектам которые создаете. В последствии вы с легкостью сможете их регулировать кликнув дважды на своем цвете в панеле Swatches и выбрав Color Type — Spot Color.
colors

4. Модульный Дизайн

Создавайте модули используя Symbols! Если вы оперируете несколькими одинаковыми объектами такими как меню навигации, колонтитулы, декоративные элементы итд, то имеет смысл преобразовать их в символы. В последствии вам не прийдется редактировать каждый типовой элемент, нужно будет отредактировать только один из них как к остальным сразу же применятся эти изменения. Панель находится Window > Symbols, чтоб преобразовать объект в символ нажмите New Symbol, для редактирования символа просто дважды кликните по нему.
modular

Забиваем Сайты В ТОП КУВАЛДОЙ - Уникальные возможности от SeoHammer
Каждая ссылка анализируется по трем пакетам оценки: SEO, Трафик и SMM. SeoHammer делает продвижение сайта прозрачным и простым занятием. Ссылки, вечные ссылки, статьи, упоминания, пресс-релизы - используйте по максимуму потенциал SeoHammer для продвижения вашего сайта.
Что умеет делать SeoHammer
— Продвижение в один клик, интеллектуальный подбор запросов, покупка самых лучших ссылок с высокой степенью качества у лучших бирж ссылок.
— Регулярная проверка качества ссылок по более чем 100 показателям и ежедневный пересчет показателей качества проекта.
— Все известные форматы ссылок: арендные ссылки, вечные ссылки, публикации (упоминания, мнения, отзывы, статьи, пресс-релизы).
— SeoHammer покажет, где рост или падение, а также запросы, на которые нужно обратить внимание.
SeoHammer еще предоставляет технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней.
Зарегистрироваться и Начать продвижение

5. Шрифты с иконками

Используйте шрифты с иконками(Font Awesome, Entypo, Typicons итд)! Добавлять иконки можно через панель Window > Type > Glyphs, просто выберите Type Tool и дважды кликните на нужную иконку.
icons

6. Разметка от популярных CSS фреймворков

Используйте систему разметки колонок вашего любимого фреймворка для создания макетов веб-страниц. Создайте в самом верху слой с прозрачными колонками и регулируйте его видимость. Многие дизайнеры используют 1140px Grid, Bootstrap 940px, Bootstrap 1170px. А каким шаблоном разметки или фреймворком пользуешься ты?
bootstrap

7. Выравнивание объектов по сетке

Настрой сетку для веб-дизайна! Я использую сетку с большой клеткой 100px которая в свою очередь делится на клетки по 10px. Это просто настроить Edit > Preferences > Guides & Grid, там выставим значения Gridline every — 100px и Subdivisions — 10. Затем активируй выравнивание по сетке поставив галочку View > Snap to Grid. Теперь все твои объекты будут четко вставать по 10-и пиксельной сетке.
snap

Продолжение:
14 советов по быстрому созданию интерфейсов в Adobe Illustrator (часть вторая)

Данная статья является переводом Speed Design with Illustrator

Filed Under: Статьи Tagged With: AI, UI, Урок

Понравилось? Поделись!

Популярно

Genesis framework. Быстрое редактирование темы WordPress на Genesis framework

Genesis framework. Быстрое редактирование темы WordPress на Genesis framework

Мокап скетчбука. Sketchbook MockUp PSD

Мокап скетчбука. Sketchbook MockUp PSD

100 иконок флэт иконок Unigrid Flat

100 иконок флэт иконок Unigrid Flat

  • Елена

    Здравствуйте, Вадим! Очень заинтересовалась вашим сайтом. Много полезных и нужных вещей можно найти у вас. Но вот только есть моменты, о которых впервые слышу, и тем более их применить пока не решусь. Но кое-что хочу попробовать уже сейчас.
    Вадим подскажите пожалуйста Adobe Illustrator — это бесплатный сервис? И если да, то где можно его скачать. Спасибо!

    • Vadim Petrov

      Adobe Illustrator это платный векторный редактор, но это не мешает миллионам пользователей использовать его взломаные версии скаченые с торрентов. Вы можете скачать пробную версию(на месяц) просто чтобы ознакомится либо купить годовую подписку лицензионной программы на сайте adobe.com(на момент написания 900-600 руб.)

  • Zar

    Уроки просто супер. Скажите, пожалуйста, а в какой программе вы делаете такие анимации?

(c) 2022 - Pixelgene - Ресурсы для веб-дизайнеров. Freebies. Журнал о веб-дизайне.
Подборки свежих freebies, мокапы(mock-up), шрифты, иконки, psd, wordpress, статьи о веб-дизайне, лайвхаки для дизайнеров.