Создание презентации в illustrator

Обновлено: 04.07.2024

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

"не бойтесь совершенства, оно вам не грозит" Сальвадор Дали

Dmitrij M

Модератор

@zwer, если работали в Ворд, то ПП не будет для вас проблемой. Это, в общем-то, то же самое. Добавлены элементы анимации и управления презентацией.

Нет, я не работаю в ворд. Вообще стараюсь его избегать. Иногда текст копирую из него и долго форматирование чищу). Освоить не проблема. Но не нужно. Интересовалась другим. Какие способы импорта макета из илла в пойнт, есть ли, надо ли.

"не бойтесь совершенства, оно вам не грозит" Сальвадор Дали

Dmitrij M

Модератор

Записать пдф и импортировать. ПП импортирует большинство графических форматов.

splxgf

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

kstati

иɯɐɯɔʞ

Иногда текст копирую из него и долго форматирование чищу

В том то и проблема, что насмотрелись анимации, и хотят один график анимировать, а я что, зверь чтоль, вот пытаюсь понять, насколько оправдано это дизайнеру делать, всегда думала, что офис - для специально обученных девочек ). Я я - так, могу фотографировать, могу макет в печать делать. %)
Просто не люблю необоснованно отказывать привычным и адекватным, в общем, людям, без объяснений.

"не бойтесь совершенства, оно вам не грозит" Сальвадор Дали

splxgf

Спасибо, большое, за пример. Схоже мыслила. Договорились, что начнем как обычно, а начнут настаивать, объясним, что это + еще один специалист и расходы, если что ).

"не бойтесь совершенства, оно вам не грозит" Сальвадор Дали

В любом случае макет буду делать в иллюстраторе, планировала из него в пдф, как обычно

Затем из Acrobat Pro XI сохраните PDF как презентацию PowerPoint. Просмотрите ее внимательно.

carry

Главное - понять чего и куда должно шевелиться А в чем там рисовать - вставлять - это уже небольшие технические проблемы.

@carry, Вы зашли продемонстрировать чувство собственного превосходства? )

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

В какой программе удобнее готовить презентации? Есть PowerPoint, но также существуют и продукты Adobe – Photoshop, Illustrator и InDesign. Давайте попробуем понять основные отличия этих программ.

Начну с основ. Напомню, что есть векторные изображения и растровые .

Растровые изображения состоят из пикселей. При масштабировании пиксели становятся заметнее. Векторные картинки состоят из кривых.

Стандартные расширения файлов, в которых сохраняются данные форматы.

В 1987 году появилась первая версия редактора растровых изображений. Создал ее студент Мичиганского университета для платформы Macintosh и назвал Display. Позднее права на программу выкупила компания Adobe, переименовав в Photoshop .

Интересный факт: PowerPoint появился тоже в 1987 году. Студент из Беркли Имам Османов, а также Деннис Остин, Том Рудкин и Егор Синица разработали продукт под Макинтош. Первая версия шла в черно-белом формате. В тот же год программу у ребят выкупил Microsoft за 14 млн долларов.

Что делают в Photoshop?

Редактируют фотографии: меняют цвета, добавляют эффекты, составляют коллажи, ретушируют.

by Nacho Seoane

В Фотошопе очень много кистей, поэтому в этой программе еще и рисуют.

by Thomas Dubois

Имея планшетную версию программы, всеми этими инструментами хочется пользоваться особенно сильно.

Фотошоп отлично перекликается с 3D моделированием . Можно подготовить исходный макет в одной программе, а в Фотошопе уже добавить сочность цветов, блики, тени, яркость.

Создали 3D модель:

Финишировали в Фотошопе, добавив множество эффектов:

Идем дальше: Adobe Illustrator

Программа для работы с векторной графикой, появилась тоже в 1987 году.

Что делают в Иллюстраторе?

Рисуют иконки, создают иллюстрации из линий. Смотрятся эти линии очень четко и ярко.

by grace chen by Meier Delphine

Конечно же, создают логотипы.

by Ashot Tatyan

by Nikita Nelikhov by Big John PRO

Очень удобно сделать зарисовку из линий в Иллюстраторе, перенести макет в Фотошоп и там уже сделать заливочку, наложить градиент и всячески приукрасить работу. Сейчас в тренде добавить шероховатости или искусственного меха.

by David Sierra

InDesign

Появился в 1999 году.

Что делают в InDesign?

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

by Jimmy Muldoon by Bethany Olechnowicz

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

Теперь ответьте себе на вопрос: в какой из этих программ можно делать бизнес-презентации?

Правильно – ни в одной. Почему? Давайте поразмыслим вместе.

PowerPoint – это больше про скорость и дизайн , чем про чисто дизайн. Это больше про связку с Excel и Think-cell, про работу с большими данными, цифрами, графиками, таблицами
Презентация – это самый быстрый и легкий способ продать свою идею, хоть как-то визуализировав ее. Файл .pptx весит немного, а, соответственно, его удобно пересылать по e-mail . Теперь представьте, сколько весят и рендерятся всяческие многослойные проекты в других программах
Презентацию может научиться делать каждый, дизайнеры же обычно ограничены только работой в одной программе. Например, верстальщик газет вряд ли придумает по-настоящему стильную иллюстрацию или макет в 3D. В PowerPoint же есть возможности почти для всего. Разумеется, не на профессиональном уровне
Презентации не идут в полиграфию, поэтому здесь не так важны отступы, страницы, размер шрифта и разрешение фотографий. И хотя все это нужно соблюдать, на разных слайдах всегда будет разная размерность шрифта, на документах из 10 страниц можно не ставить страницы и т.д.
Не сдавайте клиенту презентацию в формате .psd. Все хотят менять и добавлять данные на слайдах . Это, пожалуй, один из важнейших параметров, почему в бизнесе ценится работа в .pptx

Итог такой: нужно уметь хорошо работать в PowerPoint и при наличии времени имплементировать авторские наработки в программах Adobe.

Для начала посмотрите на то, что мы будем стараться сделать:

Создадим новый документ шириной 960px и произвольной высотой. Я выбрал такую ширину, потому что, судя по посетителям нашего сайта, у большинства из них немаленькие мониторы.

Не забудьте выставить Color Mode в RGB.

Шаг второй

Чёрные границы на картинке ниже обозначают размеры создаваемого нами документа (область между ними ещё называют artboard). Мне нравится помещать скриншот с чистым окном браузера в качестве подложки: гораздо легче воспринимать страницу такой, какой она должна получиться.

Шаг третий

Следуюший шаг очень важен. Вы, разумеется, можете выбрать произвольный масштаб (Zoom) и даже изменять его в процессе работы, но имейте в виду, что текст на странице должен быть удобочитаемым при масштабе 100% (1:1). Для изменения масштаба вы можете использовать отмеченное ниже поле.

Шаг четвёртый

Вы можете скрывать и отображать границы рабочей области тогда, когда вам это нужно. Для её сокрытия вам нужно выбрать команду View > Hide Artboard. Есть только одна проблема: такая операция занимает слишком много времени. Поэтому, советую вам использовать специальное сочетание клавиш для этого: Command + Semicolon (;).

Шаг пятый

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

Шаг шестой

Когда вы будете уверенным в разметке страницы, вы можете удалить прямоугольники, заменив их направляющими (Guide lines).

Шаг седьмой

Используя в качестве отправных точек направляющие, добавьте на страницу различные элементы: навигацию, текст, логотип, изображения и иконки, по вашему вкусу. Когда вы наиграетесь с элементами интерфейса, попробуйте убрать направляющие и посмотреть на плоды своей работы. Может возникнуть такая ситуация, что направляющие будут работать против вас. Подстройте их, чтобы они знали своё место.

Шаг восьмой

Доведите шапку страницы до совершенства, добавив в неё изображения, иконки.

Шаг девятый

Я решил добавить голубого цвета в шапке.

Шаг десятый

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

Шаг одиннадцатый

Существует несколько способов подготовки дизайна для WYSIWYG-редакторов (например, Adobe Dreamweaver). Первый предполагает использование слайсов (Slice). Их можно создать с помощью тех же направляющих или выделением. Сделаем с помощью направляющих: перетащим и расположим их вокруг каждого элемента-ссылки на странице. В нашем примере, все четыре иконки являются ссылками: ведут на отдельные страницы на нашем сайте.

Шаг двенадцатый

Когда вы разметите направляющими нужные блоки на странице, можно превратить их в настоящие слайсы. Для этого используем команду Object > Slice > Create from Guides. Я заметил, что Illustrator может не сделать соответствующие слайсы по первому требованию, поэтому я повторяю эту операцию три или четыре раза. Когда всё будет готово, появятся чёрные пронумерованные блоки.

Шаг тринадцатый

Для сохранения сделанных слайсов, используйте File > Save for Web & Devices. . Выделяйте с помощью Slice Select Tool (k) нужные для сохранения слайсы. Вы можете выбрать несколько таких блоков, зажав Shift. На панели справа выберите нужные вам параметры сохранения изображений. JPEG, например, больше подходит для изображений с несколькими цветами, GIF — для изображений с маленьким числом цветов и большими однотонными областями, а PNG — для сохранения прозрачности в изображениях (однако же, вам предстоит встретиться с чудаком по имени Internet Explorer в случае использования последней). Выберите нужное вам качество (можете поиграться с настройками) и нажимайте Сохранить.

Шаг четырнадцатый

Выберите место для сохранения файлов. Я выбрал Рабочий стол. Не забудьте выставить в поле Format значение Images Only.

Шаг пятнадцатый

На вашем рабочем столе появится папка с именем Images. Внутри — слайсы, которые теперь стали изображениями.

Шаг шестнадцатый

Очистите все направляющие командой View > Guides > Clear Guides. Далее, нарисуйте направляющие вокруг тех объектов, которые вы намерены разрезать сейчас. При наведении указателя на меню, оно должно менять свой цвет. Вам нужно разрезать его для всех используемых вами оттенков.

Шаг семнадцатый

Выберите слайсы, которые вы хотите сохранить. Навигация в моём примере как раз подходит для сохранения в GIF (не содержит изображений и большого количества цветов). Если вы хотите использовать обычные шрифты, то вам следует оформить нафигацию с помощью HTML.

Шаг восемнадцатый

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

Шаг девятнадцатый

При сохранении изображений в ту же папку, что и в прошлый раз, она будет содержать и новые, и старые изображения. Не забудьте повторить шаги 16-18 для других состояний кнопок навигации.

Шаг двадцатый

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

Другой метод создания слайсов заключается в выделении объекта и выполнении команды Object > Slice > Create from Selection. Вы можете использовать любой способ для создания слайсов, какой больше нравится.

Шаг двадцать первый

В определённых случаях вам не понадобится написанный прямо в Illustrator текст, поэтому вы его можете спокойно удалить (до экспорта слайсов).

Шаг двадцать второй

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

Крайний шаг

Посмотрите ещё раз на то, что у нас получилось.

Я уверен, что вы почувствовали лёгкость при работе с Adobe Illustrator. В нём очень просто создавать макеты любой сложности: вы можете полностью контролировать процесс создания макета страницы.

Читайте также: