Доброго дня. Хочу з'ясувати для себе, наскільки зручно і чи можливо взагалі працювати веб-дизайнеру в illustrator при створенні макета сайту. Прошу висловлюватися тільки людей, які успішно працюють в цій галузі, професіоналів, думок дилетантів наслухався багато вже, в результаті тільки розчарування.
Власне вирішив зверстати однаковий макет в ілюстратора і фотошопі паралельно. Перше з чим зіткнувся для себе. Сайт адаптивний, є точки зупинки, є сітка, значить є і прив'язка до пікселів.
Моторошно Довга розставляти напрямні по пікселям, дратувало, що напрямні відбиваються з вікна верств. Зовсім не зрозуміло, якщо я малюю в масштабі 1: 1, то стикаюся з проблемою, що дрібні елементи (
менше 10 пікселів) намальовані в цьому ж масштабі потім погано масштабуються в більшу сторону, починаються проблеми з товщиною обведення, наприклад, коли елменти скейлітся, а обведення - немає. Малювати спочатку в більшому масштабі, а потім вставляти з іншого файлу, може так треба робити? Але при такому підході зручність втрачається. Растровий фон - зовсім біда, добре якщо масштаб 1: 1 в піскельном вираженні, а якщо ні? Якщо спочатку узятий інший масштаб або зовсім не прив'язувався до пікселів, а тільки до пропорцій, а потім необхідно застромити растр, який у велику сторону не Скейл. Як взагалі будувати робочий процес в ілюстратора.
Дістало лазити за веторнимі об'єктами в люстру, копіювати, вставляти, позиціонувати і т.д. Знову ж масштаб. Якщо вибрав 1: 1, постає питання, як потім графіком нарізати для ретини? Якщо більший, то наскільки? Так щоб на ту саму сітківку вистачило? Але тоді як працювати з растром, адже часто немає фотоматеріалів хорошої якості і доводиться використовувати бекграунд шириною 1400 пікселів на екрани 1920 пікселів шириною, а якщо масштаб ще збільшений скажімо x1.5, тоді цей фон в макеті почне розмиватися при розтягуванні.
Я зовсім заплутався, жодна з програм не підходить добре під мої потрібні, а тут кричать ще всякі - давай в індізайн, а ось у нас в скетчі і т.д. Мака у мене немає, на вірталке працювати убого, індізайн пробував, не зміг зрозуміти як там найпростіші речі зробити необхідні для дизайну макета, muse теж пробував, зрозумів, що підійде тільки для обмежених макетів на кшталт Лендінзі, а коли буде серйозний ui, доведеться викинути і залишитися без інструменту.
Крик душі - допоможіть розібратися. Задавайте питання, я відповім.
Потрібен саме універсальний солдат. З цієї точки зору начебто ідеальний ілюстратор, і люди кажуть, що успішно в ньому створюють макети, але я не розумію як, як вони вирішують питання пов'язані з необхідністю роботи з растровою графікою?
Користуючись нагодою, хочу запитати про те, як люди малюють макети для адаптивного сайту, окремо по макету для кожного дозволу враховується? Це ж дуже незручно, може є простіші шляхи? Тут звичайно поза конкуренцією muse, але. як говорив раніше, програма не підійде для складних макетів.
Дизайнер і перфекціоніст.
наскільки зручно і чи можливо взагалі працювати веб-дизайнеру в illustrator при створенні макета сайту.
Працювати можливо і цілком зручно. Проблема в іншому - верстальники не шанують тому плагіни і утиліти, що полегшують верстку під Фш є, а під Аі немає. Це не раз обговорювалося навіть тут, на тостери. Пошукайте.
Моторошно Довга розставляти напрямні по пікселям, дратувало, що напрямні відбиваються з вікна верств.
Не згоден. Особисто мені ні краплі не складно поставити нову напрямну з прив'язкою до піксельної сітці в Аі. Чи не складніше, ніж в Фш. А якщо не подобається, що напрямні серед елементів дизайну, так винесіть їх на окремий шар і все.
менше 10 пікселів) намальовані в цьому ж масштабі потім погано масштабуються в більшу сторону
Чергова дивина, ніколи не було таких проблем. Це ж вектор, його можна масштабувати як душа забажає. Дивіться які настройки виставлені, можливо, «складності» через це.
починаються проблеми з товщиною обведення, наприклад, коли елменти скейлітся, а обведення - немає.
Досить поставити «галочку» і обведення буде масштабироваться (панель Transform). І ніяких «взяти в більшому масштабі, а потім зменшити» не потрібні. Так що ця «проблема» лише через незнання функціоналу програми. Раджу вивчити ретельніше Аі, посомтреть всі можливі настройки в панелях, подивитися уроки і т.п.
З растром теж не бачу проблем. Якщо в макеті його дуже вже багато, то що заважає зробити його (растр) в Фш? Інструменти треба підбирати виходячи із завдань і зовсім не обов'язково щоб це був строго тільки Фш, тільки Аі або тільки якась інша програма.
А вже якщо растр всього лише у вигляді превью картинок в макеті, то вставити їх для презентації також легко як і в Фш. Причому, на верстку віддавати вже можна і без них. Тобто не проблема зробити інтерфейс, наприклад, в Аі, а растрову графіку (фони та інше) покласти окремо. Не забути тільки пояснити верстальщику де і як все це повинно розташовуватися. Або навпаки, зробити макети в Фш, а всі елементи (іконки, кнопки і т.п.) окремо в svg покласти (і не треба паритися з купою розмірів).
Дістало лазити за веторнимі об'єктами в люстру, копіювати, вставляти, позиціонувати і т.д.
Не існує програми, яка зробить робота за дизайнера :) Лінь по Alt + Tab перемикатися між програмами? Ну йдіть в копірайтери, там одного Word'a вистачить))
Якщо вибрав 1: 1, постає питання, як потім графіком нарізати для ретини? Якщо більший, то наскільки? Так щоб на ту саму сітківку вистачило?
У Фш є assets, також є купа сторонніх плагінів - вибирай що зручніше. Інструкцій, статей і оглядів, благо, вистачає. З приводу розмірів для РЕТІНА і інших також існує маса статей з інструкціями (не рахуючи гайдлайни), ви їх легко знайдете.
Але тоді як працювати з растром, адже часто немає фотоматеріалів хорошої якості і доводиться використовувати бекграунд шириною 1400 пікселів на екрани 1920 пікселів шириною, а якщо масштаб ще збільшений скажімо x1.5, тоді цей фон в макеті почне розмиватися при розтягуванні.
Правильно, треба враховувати хто і як буде цей сайт дивитися і підбирати зображення відповідно до обмежень. Якщо відомі конкретні максимальні розміри, то треба готувати графіку під них. Немає в інтернеті - купити на мікростоках, намалювати самому, попросити друга, замовити у колег і т.п. Якщо паралельно проводити консультації з верстальником, то і рішення знайдете оптимальне і обом роботу спростите.
Якщо жодна програма не ідеальна, то логічно зробити вибір про використання більше однієї програми в роботі;)
Індізайн не для інтернету, хоч в ньому, часом, і зручно зробити навіть такий макет (наприклад, зробити скелет, а потім продовжити роботу в Фш; особливо, якщо в макеті основа це текст). Всякі Muse та інші напівавтоматичні або автоматичні інструменти теж можуть бути використані - все залежить від конкретного завдання. Для таких як ви зробили ще Affinity designer, але якщо і він не подобається, то прям не догодиш. Чекайте повнофункціональну версію Adobe XD під Win.
Будете обмежувати себе однією програмою - будете вічно нити, що десь незручно.
Про макети для адаптивного теж не раз вже обговорювали тут. Хтось звик робити тільки одним способом, хтось виходить із ситуації. Я ставлюся до других і на практиці бувало різне:
а) робляться макети під кожний дозвіл (список обговорюється з клієнтом / верстальником) - довше і дорожче, але деякі верстальники воліють такий підхід;
б) робиться один основний макет та текстовий опис поведінки блоків і елементів, частина графіки може готуватися додатково - підходить для нескладних дизайнів, де логіка поведінки інтерфейсу може бути описана словесно і коли потрібно трохи заощадити;
Іноді можна просто блок-схемами показати поведінку інтерфейсу.
в) робиться один макет і все - частіше якщо клієнт економить і / або ще немає конкретного верстальника і клієнт не знає чи потрібні додаткові макети; тут або верстальник потім сам мучиться над адаптивен, або клієнт повертається за доп макетами.
Не можу виділити якийсь найпопулярніший з варіантів тому всі вони бувають приблизно в рівному співвідношенні.
Бюджет малий - робіть один, бюджет дозволяє і / або клієнт хороший - робіть по максимуму, якщо вам важливо щоб сайт виглядав як ви задумали при різних дозволах екрану.