В двух словах, отрисовка логотипа – это перевод растрового изображения в векторный формат. Необходимость в получении векторного формата логотипа возникает, когда требуется масштабировать (как увеличивать, так и уменьшать) изображение без потери качества. Если многократно увеличивать растровое изображение, например фотографию, то в конечном итоге будут видны точки различных оттенков, из которого состоит данное изображение. Убедиться в этом довольно легко, например Вы можете скопировать с любого сайта логотип и вставить его в документ любого текстового редактора. Захватив изображение за край, попробуйте его растянуть. Потеря качества будет заметна сразу. При этом векторный объект, состоящий не из точек, а из линий нулевой толщины можно растягивать или сжимать бесконечно.

Зачем нужна отрисовка (векторизация) логотипа? Допустим, Вы располагаете изображением логотипа с сайта или вставленным в текстовый документ. Вам необходимо разместить логотип на визитке, буклете, в каталоге, просто залить его другим цветом или вырезать контур логотипа. Для примера приведем несколько изображений, где слева Вы видите исходное растровое изображение, а справа отрисованный логотип (переведенный в векторный формат).

Чувствуете разницу?

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

Стоимость отрисовки логотипа.

Цена на услугу по отрисовке логотипа колеблется в зависимости от сложности работ и стартует от 500 рублей за простейшие лого, состоящие из простых контуров или буквенных аббревиатур с рубленым (не имеющим засечек и сложных линий) шрифтом и может составлять несколько тысяч рублей в логотипах где много сложных линий и контуров, градиентных заливок (перетекание из одного цвета в другой) и т.п., например отрисовка российского герба в самом сложном геральдическом исполнении стоит около 5000 тысяч рублей.

Для примерной оценки стоимости отрисовки Вашего логотипа приводим пример таблицу ниже, в которой изображение по степени возрастания сложности – цена за услугу по отрисовке логотипа.

Как заказать отрисовку логотипа.

Отправляете нам по электронной почте имеющееся лучшее у Вас изображение логотипа, а так же указываете пожелание по виду векторного разрешения (.cdr, .ai, .eps)

Мы в кратчайшие сроки просчитываем стоимость работ и указываем сроки.

Вы выбираете способ оплаты и оплачиваете работу.

В указанные сроки мы отрисовываем Ваш логотип и Вы получаете логотип в необходимом Вам формате.

При создании макетов часто возникает ситуация когда логотип предоставлен в плохом качестве и при увеличении бьется точками. Что делать когда единственный имеющийся у нас логотип в отвратительном качестве и его нельзя использовать даже если сделать очень маленьким. На помощь приходит отрисовка. Что же такое отрисовка логотипа?

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

Здесь, на примере обычного лого состоящего из домиков я покажу, как прорисовать его заново в программе Adobe Illustrator.

Перед отрисовкой логотипа, внимательно посмотрите на него, чтобы понять, какие инструменты и приемы подойдут. В моем примере, большинство элементов в логотипе имеют прямые линии, за исключением дорожки к дому.

Домики одинаковые, а это значит, что нарисовать нужно только один. Основная фигура домика должна быть целостной, так как имеет толстый контур или обводку. Поэтому, в данном случае будут использоваться только два инструмента "Прямоугольник" и "Перо". И такие приемы как копирование, поворот, склеивание, вычитание и зеркальное отражение.

Прорисовка элементов логотипа.

Для начала, заблокируйте вашу картинку на отдельном слое, чтобы она не перемещалась. Так удобнее будет рисовать по ней.

Для прорисовки одного дома потребуется пять прямоугольников:

Сам дом.

Труба.

Крыша, чтобы получилась ровной, нарисуйте один прямоугольник под углом и отразите его зеркально.

Дверь.

Окно.

С помощью панели "Обработка контуров" склейте все прямоугольники в одну фигуру, за исключением дверей и окна. Задайте основному контуру дома обводку необходимой толщины. Поскольку все дома абсолютно одинаковые, полученный рисунок скопируйте на другие места.

Основание для домов, тоже прямоугольник. Дорожку к дому удобнее рисовать инструментом "Перо". А затем, с помощью панели "Обработка контуров" вычесть один из другого.

Теперь, когда логотип готов, нужно преобразовать все обводки в объекты, нажмите - Объект/Разобрать оформление... Логотип готов!

В вашем случае, или шрифты. Тогда понадобятся другие инструменты рисования.

В видео показана пошаговая прорисовка логотипа с домиками.

Напишите в комментариях, как эта статья помогла вам в отрисовке вашего логотипа.

(Visited 4 668 times, 1 visits today)

Инструменты рисования в Adobe Illustrator Рисуем на планшете лошадь в Adobe Illustrator

При создании дизайна сайтов в Adobe Photoshop не обойтись без использования какой-либо системы сеток. Можно создать сетку самостоятельно, используя направляющие, либо воспользоваться уже готовым, проверенным решением — готовой сеткой Bootstrap в формате PSD . Не смотя на то, что дефолтные размеры Bootstrap сетки несколько стандартизируют дизайн, данный вариант успешно используют в своей работе огромное количество веб-дизайнеров по всему миру. Кроме того, такая стандартизация позволяет максимально быстро выполнять HTML верстку созданного макета, что неминуемо приводит к ускорению работы над проектом в условиях разработки сайтов на потоке или создания шаблонов.

Параметры стандартной Bootstrap сетки в PSD формате:

• Общая ширина рабочей области: 1920px;
• Ширина контейнера с отступами: 1170px;
• Ширина колонки без отступов: 68px;
• Ширина отступа (Gutter): 15px;
• Система сетки: 12-ти колоночная.

Расстояние между колонками и некоторые размеры могут иметь погрешность +/- 1px в связи с тем, что некоторые нечетные величины не могут быть поделены поровну. Но это некритично в масштабах разработки PSD макета.

Правила работы с PSD сеткой Bootstrap

Существуют определенные правила работы с Bootstrap сеткой. Некоторые начинающие веб-дизайнеры не учитывают в своей работе эти правила, в результате чего возникает непонимание между верстальщиком и дизайнером, в случае, если над проектом работает команда. Bootstrap сетка в PSD формате для создания дизайна сайта разрабатывалась основываясь на «физических» свойствах сетки CSS фреймворка Bootstrap и дизайнер должен придерживаться определенных правил для исключения излишних коллизий в процессе разработки.

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

2. Вы можете использовать любое количество одиночных колонок для визуализации различных блоков сайта.

3. После разделения макета на колонки и блоки, промежутки (Gutters) между ними не могут быть использованы для размещения каких-либо элементов дизайна или контента сайта.

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

Последний пункт очень важен, так как многие начинающие веб-дизайнеры боятся выходить за рамки Bootstrap сетки и дизайн, в большинстве случаев, получается довольно однообразный и скучный. Помните, что направляющие Bootstrap сетки необходимы вам только для разметки блоков сайта, которые необходимо упорядочить в соответствии с системой сеток, это может быть разделение макета на базовые логические части — сайдбар + контент, определение элементов блока, таких, как айтемы карусели, секции новостей и так далее. В остальном, не стоит ограничиваться рамками сетки и делать визуализацию только по направляющим. Однако если вы создаете дизайн определенной секции или блока в соответствии с системой Bootstrap сетки, обязательно придерживайтесь правил из пунктов 1,2,3 выше.

Как получить адаптивную сетку Bootstrap нужной ширины

На этой страничке мы заберем только сетку Bootstrap и зададим некоторые параметры. Если же вам нужны другие компоненты, то отметьте их чекбоксами:

Отключаем все плагины и все настройки сбрасываем на «дефолтные» (т.е. по-умолчанию).

В разделе «Grid system» в поле «@grid-gutter-width» прописываем значение «20px» (по-умолчанию — 30px).

В разделе «Container sizes» в поле «@container-large-desktop» прописываем значение «940px + @grid-gutter-width»:

Затем опускаемся в самый низ страницы и нажимаем кнопку «Compile and Download».

Из полученного архива используем файл «bootstrap.min.css»

Открыв, для примера, файл «bootstrap.css» в , опускаемся до локаторов @media и убеждаемся, что все скомпилировано правильно.

При создании дизайна сайтов в Adobe Photoshop не обойтись без использования какой-либо системы сеток. Можно создать сетку самостоятельно, используя направляющие, либо воспользоваться уже готовым, проверенным решением - готовой сеткой Bootstrap в формате PSD . Не смотя на то, что дефолтные размеры Bootstrap сетки несколько стандартизируют дизайн, данный вариант успешно используют в своей работе огромное количество веб-дизайнеров по всему миру. Кроме того, такая стандартизация позволяет максимально быстро выполнять HTML верстку созданного макета, что неминуемо приводит к ускорению работы над проектом в условиях разработки сайтов на потоке или создания шаблонов.

Класснуть

Плюсануть

Запинить

Параметры стандартной Bootstrap сетки в PSD формате:

• Общая ширина рабочей области: 1920px;
• Ширина контейнера с отступами: 1170px;
• Ширина колонки без отступов: 68px;
• Ширина отступа (Gutter): 15px;
• Система сетки: 12-ти колоночная.

Расстояние между колонками и некоторые размеры могут иметь погрешность +/- 1px в связи с тем, что некоторые нечетные величины не могут быть поделены поровну. Но это некритично в масштабах разработки PSD макета.

Правила работы с PSD сеткой Bootstrap

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

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

2. Вы можете использовать любое количество одиночных колонок для визуализации различных блоков сайта.

3. После разделения макета на колонки и блоки, промежутки (Gutters) между ними не могут быть использованы для размещения каких-либо элементов дизайна или контента сайта.

4. Не бойтесь выходить за рамки сетки. Если вы решили сделать какую-то нестандартную секцию или блок - реализуйте вашу идею вне рамок Bootstrap сетки, если это необходимо. Но постарайтесь обеспечить ваше решение какой-либо системой, например, придерживайтесь центра макета или частично используйте возможности Bootstrap сетки, соблюдайте кратность элементов или придерживайтесь любой другой логической системы при создании нестандартного блока. Так вы значительно облегчите работу верстальщика, если над проектом трудится команда разработчиков. Вам скажут спасибо.

Последний пункт очень важен, так как многие начинающие веб-дизайнеры боятся выходить за рамки Bootstrap сетки и дизайн, в большинстве случаев, получается довольно однообразный и скучный. Помните, что направляющие Bootstrap сетки необходимы вам только для разметки блоков сайта, которые необходимо упорядочить в соответствии с системой сеток, это может быть разделение макета на базовые логические части - сайдбар + контент, определение элементов блока, таких, как айтемы карусели, секции новостей и так далее. В остальном, не стоит ограничиваться рамками сетки и делать визуализацию только по направляющим. Однако если вы создаете дизайн определенной секции или блока в соответствии с системой Bootstrap сетки, обязательно придерживайтесь правил из пунктов 1,2,3 выше.

На этом уроке мы подготовимся к верстке сайта по PSD макету, используя только сетку (Grid System) от фреймворка Bootstrap 4 . Научившись такому методу верстки, вы избавляете себя от возможных проблем с адаптивностью сайта, особенно это хорошо для новичков.

Адаптивность сайта при верстке по сетке Bootstrap-а обеспечивают flexbox-сы , поддерживаемые всеми основными браузерами и даже Internet Explorer-ом , начиная с IE9+ . Для более ранних версий, чем IE 9 , подключаем скрипты, помогающие правильно отображать нашу верстку.

И самое главное – PSD макет изначально должен быть нарисован с учетом дальнейшей Bootstrap верстки . А так, других нет причин, почему не верстать по бутстраповской сетке, как в своих проектах, так и на заказ. Постараюсь дать меньше теории, никакой воды и больше практики.

Подготовка к верстке

Откройте макет в Photoshop-е и убедитесь, что он имеет 12-ти колоночную разбивку по направляющим, а все элементы дизайна выровнены относительно этих направляющих. Расстояние между крайними направляющими как правило равняется 1170 пикселям.

Скачайте на сайте https://getbootstrap.com/ компилированный CSS и JS для легкой интеграции в ваш проект.

Скопируйте из раздела Introduction / Starter Template - стартовый шаблон страницы и вставьте в индексный HTML -файл вашего проекта. Мы создали заготовку для будущего HTML документа.

Скачивать bootstrap.min.css или использовать ссылку на него?

Есть мнение, что файл bootstrap.min.css будет быстрее подгружаться, поскольку он находится на нескольких серверах, а не на одном вашем сервере. А значит и сайт будет быстрее открываться. Если вы все-же решите этот файл скачать себе, то указывайте правильный путь к папке с Bootstrap файлами. Создавать пустой CSS файл, куда вы будете писать свои стили, необходимо в любом случае.

Важно! Ваш CSS файл в индексном файле, должен быть подключен ниже, чем bootstrap.min.css .

Подключаем шрифты. Какие шрифты и иконки дизайнер использует в макете, можно увидеть в программе Photoshop или в расширении для браузера Chrome – WhatFont .

Зачем нужны два CSS файла?

CSS файл bootstrap.min.css – это библиотека, в которую даже не надо заходить. Мы работаем только с одним файлом - main.css , только надо следить, чтобы названия новых классов для вашего CSS файла случайно не совпали с "библиотечным".

В файле bootstrap.min.css уже созданы стили для сетки на flexbox-ах и прописаны медиа-запросы, нам просто нужно прописать подходящие классы в нужные блоки на HTML странице. Названия классов можно найти на странице фреймворка в разделе Grid . Опытные верстальщики для Bootstrap верстки подключают плагины (Bootstrap 4 Autocomplete, Bootstrap 4 Snippets) к редактору кода Sublime Text .

Разбиваем PSD макет на блоки

Мы видим, что сайт состоит из 8-ми блоков: шапка (header) с меню навигацией (nav) , 6 секций (section) и подвал (footer) .

В секциях (section: #services, #portfolio) появляются колонки, которые мы и будем верстать на основе главного компонента Bootstrap-а – сетке .

Делаем сначала HTML разметку основной структуры, детали будем добавлять по ходу верстки.

В следующей части, приступим к верстке, но не всего макета, а отдельных его блоков. Так как цель этих уроков – показать новичкам, как можно удачно совмещать обычную верстку макета с версткой по сетке Bootstrap .