Illustrator now honors 9 slice scaling of symbols что это
Обновлено: 07.07.2024
На днях на нашем форуме: Форум по Векторной Графике - пользователь Sezam задал сразу десять вопросов. Мы попытались максимально удовлетворить его любопытство. Представляю Вам список вопросов, ну а ответы вы сможете найти на форуме, если перейдете по этой ссылке.
1) Что означает и о чем предупреждает окно при открытии EPS 10:
«Illustrator now honors 9-slice scaling of simbol. » и т.д.
Что за 9 частей символа (и какого?) он там принял в обработку (или приостановил ее?), и что же там тогда с остальными частями этого символа в это время происходит?
Это что, пере-интерпретация его же работы, отправленной в 10 EPS? Или же это какая-то ошибка (и чем она чревата для стоков)? Открывается-то без видимых проблем.
Если файл создавался в Adobe illustrator cs6, сохранялся в 10 EPS, и затем был переоткрыт в CS6 для просмотра(проверки), есть ли гарантия того, что файл все-таки нормальный (при отсутствии ошибок),а не заново интерпретируется Иллюстратором как формат CS 6 со всеми его плюшками?
3) Есть ли какие-либо ограничения по применению прозрачностей (за исключением градиентов с прозрачностями, включая Stroke, и Opacity Mask(см. выше)? Mesh с прозрачностью, как я понимаю, вполне проходит. Так?
4) Режимы наложения прозрачностей тоже все можно использовать, и при любых значениях Opacity?
5) Open Path. Рассматривается ли как таковой, например, прямоугольник с обводкой? Или его линию тоже нужно в объект переводить?
6) Pattern. Обязательно ли должен быть его образец в Swatches, если паттерн-заливку всеравно нужно экспандить? Это же касательно кистей, стилей и символов?
7) Artboard нужен, не нужен? Если нужен, то какие должны быть параметры?
В Ai10 артбодов не было, а была страница документа. И если объекты вылетали за ее пределы — это считалось «некомильфо». Какие требования сейчас?
8) Совсем не понятно с превьюхами файлов (*.jpg). Какие все же необходимы параметры? Информация сильно разнится от 600х800px до 3000х3000px в качестве необходимых. Я подозреваю, что больше будет походить на правду приблизительно 1200х1000px при 72ppi и sRGB профиле. Так или нет?
Также не понятно сколько вообще джипегов должно быть по количеству?
9) На стоках превью векторных работ зачастую выглядят как обработанные в растровом редакторе. Например, паттерны с затемнением по краям, или лого на сложном текстурном фоне с тенями, бликами и прочими фишками. Вопрос такой: Может ли отличаться превью файла от оригинала (в разумных пределах)?
Другими словами, можно ли превью подавать в качестве Presentation, и доводить его до гламурного состояния в растровом редакторе, а векторный оригинал неперегружать этими ненужными украшательствами?
И еще. Вы с кем-то на форуме это уже обсуждали, но я не нашел ветку. Речь шла о паттернах. Так вот, если паттерн размножить на листе при помощи Transform, избавившись предварительно от Clipping Mask, и положив образец в Swatches, будет ли это принято, или обязательно нужна отэкспанденная заливка на весь формат?
ответы вы сможете найти на форуме, если перейдете по этой ссылке.
Несколько советов от известного дизайнера и разработчика Vincent Le Moign, который является создателем такого крупного проекта как Fontastic. В этой статье Vincent поделился как можно быстро,а главное качественно работать над интерфейсом в Illustrator.
Динамичные кнопки
Сэкономьте время создавая кнопки с динамичными стилями! Создайте динамичный стиль и применяйте его к любому тексту, который должен быть кнопкой. Динамичная кнопка изменяется в зависимости от текста внутри, при этом поля остаются неизменными. Выделите любой текст, затем в панели Appearence добавьте 2 Fill layers.
Организуйте слои(Fill layer) так, чтобы слой Characters оставался между ними как на изображении ниже.
Выберите нижний Fill layer. После этого нажмите в панели Appearence Fx > Convert to Shape > Rectangle.
Теперь можно выбрать необходимые значения полей по вертикали и по горизонтали изменяя значения Extra Width и Extra Height. Если нужна кнопка со скругленными углами, то нужно выбрать Rounded Rectagle.
Теперь верхний Fill layer меняет цвет текста, а нижний — цвет самой кнопки. Динамичная кнопка готова!
Текстовые стили
Глобальные цвета
Adobe Illustrator позволяет глобально изменять цвета объектов! Откройте панель Window > Swatches и создайте несколько цветов, которые вы собираетесь использовать в своей работе. Применяйте их к объектам, которые создаете. Далее вы с легкостью сможете их регулировать, кликнув дважды на своем цвете в панеле Swatches и выбрав Color Type — Spot Color.
Модульный Дизайн
Создавайте модули используя Symbols! Если вы оперируете несколькими одинаковыми объектами, такими как меню навигации, колонтитулы, декоративные элементы, то имеет смысл преобразовать их в символы. Потом вам не придется редактировать каждый типовой элемент, нужно будет отредактировать только один из них, тогда как к остальным сразу же получат эти изменения. Панель находится в окне Window > Symbols, чтоб преобразовать объект в символ нажмите New Symbol. Для редактирования символа просто дважды кликните по нему.
Шрифты с иконками
Используйте шрифты с иконками(Font Awesome, Entypo, Typicons и другие). Добавлять иконки можно через панель Window > Type > Glyphs, просто выберите Type Tool и дважды кликните на нужную иконку.
Выравнивание объектов по сетке
Настройте сетку для веб-дизайна. Сетка с большой клеткой 100px в свою очередь делится на клетки по 10px. Это просто настроить: Edit > Preferences > Guides & Grid, там необходимо выставить значения: Gridline every — 100px и Subdivisions — 10. Затем активируйте выравнивание по сетке поставив галочку View > Snap to Grid. Теперь все объекты будут вставать строго по пиксельной сетке.
Использование нескольких монтажных областей в одном файле
Иллюстратор позволяет использовать до 99 Artboard (монтажных областей) в одном файле, что очень удобно! Это позволяет глобально отслеживать изменения на всех макетах страниц если вы изменяете свои символы, текстовые стили или глобальные цвета. А, благодаря векторному формату, ваш документ не станет во много раз больше и скорость работы не уменьшится. Для этого необходимо открыть окно управления Windows > Artboards.
Увеличение без искажения
Используйте 9 slices scaling tool. Представьте, что вы создали прямоугольник со скругленными углами, но потом решили сделать его шире, но, если просто увеличить его (не пропорционально), то скругления углов станут непропорциональными. Правильно было бы сделать так: преобразуйте прямоугольник в символ(клавиша F8) и в окне Symbol Options поставьте галочку в чек бокс Enable Guides for 9-slice scaling и Align to Pixel Grid. Теперь дважды кликнув по символу появится раскрой, по которому и будет теперь масштабироваться наш объект. Таким образом мы получаем масштабируемый графический интерфейс.
Clipping Mask
Нет необходимости обрезать изображения открывая их в Photoshop. Используйте Clipping Mask, чтобы показывать нужную часть изображения. Создайте нужный по форме шейп, затем выделите его и картинку (шейп сверху, а картинка — снизу). Затем нажмите Object > Clipping Mask > Make.
Шаблоны
Иллюстратор позволяет создавать шаблоны с необходимыми (для быстрого начала работы) настройками: сетка, направляющие, наличие уже созданных символов, палитры цветов, стилями текста и т.д. Необходимо просто настроить один раз документ для частого использования и нажать Save as Temlate.
Стили графики
Используйте палитру Graphic Styles, с которой вы быстро сможете применять готовое оформление к таким объектам, как кнопки, меню, плашки и т.д.
Обтекание объектов текстом
Обтекание объекта текстом можно сделать автоматическим. Создайте на слое форму/рамку, вокруг которой будет обтекаться текст, затем сгруппируйте (Ctrl+G/Cmd+G) и нажми Object > Text Warp > Make.
Индивидуальные углы (в версии Adobe Illustrator CC)
С Illustrator CC вы легко можете добавить скругление, фаску и т.д. для каждого угла по отдельности.
Хочешь изучить элементы работы с Adobe Illustrator для своей первой игры? Здесь можно узнать подробности.
Срезы, созданные в Illustrator, можно использовать для преобразования иллюстраций, текста и статических изображений в элементы при создании страниц HTML (язык разметки гипертекста). Срезы позволяют разделить значительную картинку или рисунок на более мелкие области, которые можно сохранить как отдельные улучшенные картинки. Эти изображения будут загружаться одновременно и, как правило, быстрее, чем одна огромная картинка в веб-браузере. Инструмент «Срез» можно использовать для разделения макета Illustrator на фрагменты. С помощью инструмента «Срез» Illustrator добавит срезы, чтобы заполнить все промежутки между объектами. Ломтики используются для вырезания веб-иллюстраций, создавая несколько кусочков из полной картины. Чтобы использовать срезы в изображении, которое нарезано, вы должны быть в состоянии выбрать их, и вы можете сделать это с помощью инструмента выбора срезов.
Как использовать инструмент «Срез» в Illustrator?
При создании веб-страниц в Adobe Illustrator существует огромное разнообразие взаимосвязанных фрагментов. Они могут включать в себя векторную графику, растровые изображения и HTML-коды, все они функционируют совместно для обеспечения бесперебойной работы в Интернете. Чтобы отделить и отредактировать эти отдельные элементы в одной программе, Illustrator позволяет создавать конечности между ними, называемые срезами или кусочками. Процесс нарезки говорит Illustrator, какую часть веб-страницы вы хотите отделить от остальных, и сохраните их по отдельности в формате JPEG.webp, GIF или PNG.
Мы возьмем шаблон сайта EDUCBA в качестве примера процесса объяснения:
- После размещения объектов на артборде в соответствии с вашими требованиями, легко преобразовать любой из элементов или объектов в срез. Сначала выберите инструмент среза, который выглядит как скальпель на панели инструментов, а затем сформируйте рамку вокруг элементов, которые вы хотите добавить к срезу. Вы также можете выбрать элементы с помощью инструмента «Выделение», а затем нажмите «Объект»> «Срез»> «Создать». В этом примере мы нарежем логотип EDUCBA, кнопку раскрывающегося списка, курсы сертификации, вы можете в значительной степени нарезать все, что захотите. На следующих скриншотах объясняется процесс нарезки с использованием инструмента «Срез».
- Когда вы используете инструмент слайсера Illustrator, программное обеспечение, несомненно, нарезает любые изображения и объекты, которые окружают элемент. Все фрагменты или фрагменты создаются в виде ячейки таблицы, поэтому они улучшены для Интернета.
- После того, как вы нарезали нужные элементы, чтобы выбрать срез, щелкните инструмент выбора среза на панели инструментов, он будет похож на инструмент среза, но с небольшим курсором, похожим на мышь, над ним. Затем выберите срез. Если вы хотите выбрать более одного среза, просто удерживайте Shift и нажимайте на срезы один за другим.
- Вы можете выделить параметр инструмента среза из панели инструментов, нажав на внешнюю стрелку, как выделено на изображении выше, поскольку это облегчает эффективное использование инструмента.
- Если вы удовлетворены положением среза и хотите предотвратить случайные изменения, вы можете защитить его или заблокировать, перейдя на панель слоев, щелкнув столбец редактирования среза. Чтобы сразу защитить все свои фрагменты, выберите «Вид»> «Блокировать фрагменты» в строке меню вверху.
- Теперь, чтобы сохранить сделанные вами выборы, нажмите «Файл»> «Сохранить для Интернета», откроется окно, как показано ниже.
- Теперь, используя инструмент выбора срезов, вы можете выбрать отдельные нарезанные элементы и сохранить их по отдельности как JPEG.webp, PNG или GIF. Логотипы могут быть сохранены в формате SVG.
- После нажатия кнопки «Сохранить» вы получите всплывающее окно для сохранения вашего выбора, как показано ниже.
- Другой способ создания ломтиков - через направляющие. Мы будем использовать тот же пример, что и выше, и будем использовать направляющие для нарезки отдельных элементов. Для направляющих нам нужны линейки, которые можно включить, нажав Ctrl + R для Mac и Ctrl + R для Windows. Мы создадим руководства, как показано ниже:
- После того, как вы создали направляющие, следующим шагом будет нарезка элемента, нажав «Объект»> «Срез»> «Создать из направляющих».
Как видите, элементы теперь нарезаны.
- Чтобы удалить срез, выберите его с помощью инструмента выбора среза, а затем нажмите клавишу удаления. Если вы хотите удалить все фрагменты в вашей работе и начать заново, перейдите в Object> Slices> Delete all.
- Удаление фрагмента также приведет к удалению подключенного изображения, поэтому, если вы хотите сохранить изображение в целости и сохранности, вы должны вместо этого освободить фрагмент. Чтобы достичь этого, выберите нужный вам срез, а затем перейдите в Object> Slice> Release.
- В конце концов, можно скрыть ячейки таблицы ваших срезов и аналогичные логотипы, не исключая срезы из вашей работы. Для этого выберите «Вид»> «Скрыть фрагменты».
Вывод
По сути, вы используете инструмент «Срез», чтобы наметить прямоугольные контуры по области объекта, которую вы хотите вырезать из макета. Это единственная цель срезов - вылепить иллюстрацию в срезы, которые являются прямоугольными из файла макета. Illustrator делит одну иллюстрацию на несколько изображений. Он создает таблицу HTML, в которой каждая ячейка таблицы состоит из одного из этих фрагментов или фрагментов изображения. Таким образом, когда вы регистрируете веб-страницу в браузере, все нарезанные изображения появляются вместе, как загадка. Высшая часть заключается в том, что фрагменты сохраняются в файле, что означает, что вы сохранили его как документ. В Illustrator можно создать слой среза и включить все пути срезов под этим слоем. Это облегчает поиск путей срезов и позволяет вам сохранять точные измерения всех иллюстраций, которые вначале были вырезаны из файла.
Рекомендуемые статьи
Это руководство по Slice Tool в Illustrator. Здесь мы обсуждаем, как использовать инструмент Slice в Illustrator, шаг за шагом с приведенными скриншотами. Вы также можете посмотреть следующую статью, чтобы узнать больше -
Наверно каждый сталкивался с тем, что бы в Photoshop нарезать много картинок.
Сейчас я покажу как это сделать быстро и без всякого труда.
Для примера я скачал Free psd Template. Загуглил и перешел по первой ссылке.
Скачал какой то Surfing Free Theme.
Открываем и видим огромное наличие картинок, а значит нам нужно дать им название, вырезать. И сделать это быстро.
С такой проблемой чаше всего сталкиваются верстальшики, и обычно на этапе обучения не знают как делать это правильно. Поэтому даже если вы уже давным давно делаете каким то другим способом, узнав этот вы сможете сравнить.
Есть прекрасный инструмент Slice Tool (горячая клавиша 'C')
Как с этим работать ? Зажимаете левой кнопкой мыши и выделаете область. Затем с выделенной областью (готовым слайсом) вы можете - работать. К примеру поменять Название. Нажав два раза на область слайса.
Но согласитесь делать так с каждой картинкой очень долго и муторно. Как их сохранять я покажу далее. Сейчас нас волнует вопрос. Как быстро Отслайсить картинки ?
Выделять каждую картинку таким образом долго. Скорее всего есть возможность Отслайсить сразу Слой. Да такая возможность есть.
Выделаем нужную нам картинку
В данном случае картинка под маской, поэтому нам надо выделать саму маску. Это base слой.
Вот он выделенный слой, я его специально выделил. Ctrl + нажать на сам слой. (Выделил чисто для наглядности)
Дальше переходим в панель управления, где Layer - > New Layer Based Slice
И вуаля готовый slice. Но есть несколько проблем.
1. У нас нет hot key, что бы делать это быстро.
2. Выделив данный slice мы не можем поменять его параметры (ширину, высоту. )
Для того что бы открыть возможность редактирование необходимо данный slice сделать User Slice-ым.
Для это в режиме slice (горячая клавиша C). Жмем правой кнопкой мыши на slice область и нажимаем Promote to User Slice и теперь можем менять размеры slice.
Но согласитесь это довольно НЕУДОБНО делать с каждой картинкой, хотя нам не надо выделять область вручную. ЧТО же делать ? Есть выход. Назначить горячую клавишу ! Но, она будет делать только Based Slice, размеры которого мы не сможем отредактировать и вообще с ним будет не удобно работать в таком варианте. Плюс где то нам надо выделать саму картинку, а где то маску под которой находиться картинка.
Ведь все что нам надо, это выделил картинку - > нажал горячую клавишу и получил slice.
Это также можно реализовать.
Для этого нам понадобится окно Actions (Alt + F9)
Вот уже готовые actions
Далее я покажу как их сделать. Но как они работают ? Как я и писал ранее. Вы через выделение
Выберете картинку и затем просто жмете F2 и получаете готовый User Slice. К примеру я выделил 5 картинок ну за секунд 15, а то и меньше.
F3 - использую для того что бы выделить картинку и если я вижу что она под маской, значит мне надо опуститься на слой ниже и выбрать слой маску, но что бы не делать этого ручками - я записал это действие в action. Поэтому за считанные минуты я нарезаю все картинки. И в свою очередь могу заменить эту картинку и просто пересохранить ее.
Как сделать эти actions. Скажу сразу я выбрал F2 и F3 потому что они рядом и ими удобно быстро пользоваться, для F4, F5, F6 и так далее. Забил другие action которыми тоже часто пользуюсь.
Итак мы решили создать новый action.
1. Для начала я создал папку, что бы группировать свои action по разным папкам.
Создадим папку Example и подготовимся к записи action
Action по факту просто повторит все то что вы сделаете от исходной точки.
Поэтому выбираем нужную картинку через Move Tool
Теперь начинаем записывать action
Называем свой action и выберем hot key, у меня F2 выбрать не получилось, потому что я его уже занял, но нам предложили и другой вариант Shift + F2
Нажимаем Record и начинается запись, активная красная кнопка говорит, что запись идет
Теперь делаем то что я описывал ранее
Сделав это увидим что уже записалось одно действие
Далее выберем режим Slice в левой панели или нажимаем горячую клавишу C
Жмем правой кнопкой мыши и делаем Promote to User Slice
И нажимаем стоп
Теперь экшен готов и мы можем его использовать.
Теперь выделаем нужные нам картинки с зажатым Shift и жмем F2 и создаются сразу Slice для всех выделенных картинок или по одной картинки. Далее можем назвать их так как нам нужно.
Потом сохраняем через Ctrl + Alt + Shift + S.
Переходим во вкладку Original и выделаем нужные слайсы через зажатый Shift, выбераем нужный формат и качество и нажимаем Save.
Выберем куда сохранить и обязательно указываем Selected Slices, а то накидает вам все слайсы которые есть
В то место которые мы выбрали, автоматически создать или сохраниться в папку images
Могу сделать описание и других популярный экшенов. Возможны ошибки и опечатки. Сразу извиняюсь. Просто хочу поделиться опытам и знанием. Если есть вопрос и поправки - пишите, буду рад ответить.
P.S на практике сделать это намного проще, чем я описал. Но научившись делать экшены, можете сильно упростить работу с Photoshop.
Дизайн контактных форм: поля ввода
С нуля до Frontend-разработчика. Начало
Всем привет,
произошел небольшой казус в прошлом посте (не знал всех правил редактирования постов, извиняйте), поэтому решил написать новый пост.
Как говорил ранее, все кто начинают обучение в веб-разработке сталкиваются с огромным количеством информации в сети и отсутствием практических навыков. Я не стал исключением.
Даже имея RoadMap и обучающие курсы, происходит так, что мы учим сухую теорию и когда дело доходит до собственного проекта, руки и голова забывает как писать код.
Пересмотрев уйму информации в интернете, а также повторяя код за лектором, решил остановиться и начать свой путь заново, почти с нуля.
Сейчас хотел бы посоветовать небольшой план для людей, которые только начинают свой путь в веб-разработку:
1) Думаю, самый народный способ изучить основы HTML и CSS это воспользоваться бесплатными курсами от HTML Academy.
Затем эти знания можно закрепить пройдя бесплатные задания на FreeCodeCamp. (Basic)
2) Советую скачать бесплатно курс, который писал здесь (п. 2)
!Либо можете найти ссылку на скачивание zip-файла в комментариях в этом посте!
Посмотрев первый модуль, вы уже отточите свои базовые знания + будет настроено пространство.
3) После этого сразу советую изучить препроцессор CSS (хотя его и ставят в середину обучения, считаю его надо учить сразу после основ). Про них можно узнать в модуле 2 - 025 из того курса, либо из любого другого видео на YouTube.
4) Изучаем основы Git/Github. Из курса Модуль 3 - 041, либо на YouTube. В начале необходимо уметь только пушать проекты в репозиторий. имхо)
+ также многие советуют выделять время на прочтение книг и изучения англа. Но я считаю, что лучше получать информацию с помощью интерактивных ресурсов (видео), а также стараться не распыляться на другие темы.
Сложно описать сколько времени у вас займет на обучение данного материала, но в среднем можно предположить 2/3 недели.
После этого можно уже с головой углубляться в верстку.
Мой план обучения на ближайшее время:
1) Практикуем верстку с помощью Bootstrap Grid (ее многие недолюбливают, но я хотел бы закрепить эти знания);
2) Продвинутая верстка с Flexbox без интерактива;
3) Стараемся настолько набить руку, чтобы могли сверстать почти любой проект без интерактива;
4) Основы JS;
5) Поверхностное изучения JQuery и добавления интерактива на сайты.
6) Продвинутый JS;
7) React.js
8) Создаем портфолио;
8) Стараемся устроиться на работу джуном.
План на следующую неделю:
1) Доделать проект из курса (модуль 2);
2) Найти и сверстать самостоятельно пару лендингов с помощью сетки + делать их "резиновыми".
Повторюсь, что постараюсь вести этот блог и создавать новые посты пока что каждую неделю, для структурирования знаний, получения фидбека, и возможно кому-то этот путь пригодиться)
Все получилось сумбурно, я еще дилетант в этом деле, так что рад любой критике и пожеланиям :)
Читайте также: