Як намалювати шапку сайту
Вітаю вас друзі, і Новомосковсктелі мого блогу multigon.ru. Сьогодні я вам розповім як намалювати шапку сайту пріавільно! Так-так, ви не помилилися, ключове слово «правильно».
Технології стрімко розвиваються і робити статичні картинки немає сенсу. Картинка, як і дизайн сайту в цілому повинна красиво і органічно вбудовуватися в будь-який дозвіл екрана, бути адаптований.
Якщо про те як створюються дизайни адаптивних сайтів вже багато чого написано, сказано і показано, то про локальні завдання, які повинен вміти вирішувати художник, наприклад, як намалювати шапку сайту все чомусь замовчують, або обмежуються тим що малюють графіку в заданих розмірах, а потім зменшують «гуму» її програмними способами, це не зовсім коректно.
Не втомлююся повторювати, що ілюстратор, повинен підлаштовуватися під технології і адаптувати свої художні фішки, прийоми і техніки під технологічні процеси.
Отже, як намалювати шапку сайту?
Для вирішення цього питання, є два способи. Легкий і складніше.
Почну з легкого:
Перший (легкий) спосіб.
Розглянемо другий спосіб як намалювати шапку сайту
- Тут трохи складніше завдання і вимагає від ілюстратора трохи більше уваги до деталей композиції. Необхідно прораховувати всі можливі розміри, і розуміти як той чи інший композиційний еллементов буде вести себе. Які шматки ілюстрації будуть єдині, а які еллементи будуть рухатися по ширині екрану.
За рахунок адаптивних розмірів з'являється якась свобода, можна «грати» з композицією надаючи їй додаткову динаміку.
Додаткові складнощі які можуть виникнути в процесі роботи.
Кожен художник працюючи над свій композицією прагне щоб сюжет в рамках обраного формату виглядав цілісно, як я вже писав раніше ідеальна композиція та, в яку не можна нічого ні додати ні відняти, а тут перед нами стоїть завдання зробити таку ілюстрацію, щоб вона «ідеально виглядала »у всіх можливих розмірах. - це завдання не з простих. Може вийде так, що в одному розмірі все буде відмінно, а в інших розмірах (при зменшенні ширини або на оборот при збільшенні) результат вас не сильно порадує.
Але не варто впадати у відчай! Є хитрощі, які дозволяють вирішити будь-яку заморочку з форматом вашої ілюстрації.
Лайфхак від мултігона. Як намалювати шапку сайту під задану ширину екрану
Якщо ви твердо вирішили, що будете робити ілюстрацію на основі другого способу, тобто рухати окремі композиційні фрагменти шапки сайту, тоді я рекомендую починати роботу з крайнього максимуму по ширині. Крайній максимум залежить від технічних вимог. Якщо ваша ілюстрація повинна бути адаптована під дозволу широкоформатних моніторів, тоді беремо крайній максимум по ширині (діапазон 1400 - 1600 px) Ширше цих розмірів робити картинку немає сенсу.
Виходячи з висоти шапки (висота залежить від специфіки проекту, якщо це інформаційний портал, то висока шапка тут ні до чого, якщо це промо-сайт можна висоту зробити побільше) малюємо повноцінну ілюстрацію.
Для більш наочного прикладу я апелюватимуть «живими» цифрами.
1-й розмір ілюстрації: W = 1600. px | H = 500 px
2-й розмір ілюстрації: W = 1200 px | H = 500 px
В діапазоні між 1600 px і 1200 px сюжет ілюстрації буде «Гума» і вкрай бажано передбачити «плаваючі» еллементи, щоб при зменшенні ширини частина сюжету ховалася, а плаваюча частина стискалася.
3-й розмір ілюстрації: W = 1000 px | H = 500 px
Щоб намалювати грамотну ілюстрацію, потрібно продумати і прорахувати весь цикл змін сюжету композиції в діапазоні від 1600 px - 640 px
Ось такі ось заморочки. Бувай!