Flat

Flat повсюди. Flat — це просто. Flat — це модно.

Приклади робіт:

Інші статті про flat можна знайти і почитати самостійно.

Рекомендую почитати і подивитись: MAD RABBIT та Flatingo.

Перший розділ In Flat:

немає коментарів

Колір

Колір використовується завжди і всюди. Він відіграє важливу роль в кожній роботі, в кожній ілюстрації.
Саме завдяки ньому формується певне відношення до логотипу, айдентики чи чогось іншого.

(робив ілюстрацію по туторіалу)

Часто перед ілюстратором виникає питання вибору кольору і тоді є декілька шляхів вирішення: вибирати вручну кольори, шукати референси, брати кольори із готових робіт або ж шукати кольорові палітри. Для початку можна користуватися лише останніми 2 варіантами, тому що дизайнер початківець не зможе відібрати хороші кольори через свої власні смаки та через недостатню «набаченість».

У мене в закладках є багато посилань, які стосуються кольору. Можна брати кольори звідти, використовувати. З часом прийде розуміння того, як краще відбирати кольори і поєднувати їх для досягнення найкращих результатів.

Кольори компаній/брендів:
• Atlassian
• Carto
• Tailwind
• Apple
• Google
• IBM
• Clarity
• Oracle
• Ant Design
• Microsoft Fabric

• СloudFlare

Палітри:
• ColorKitty
• Scale
• ColorBox
• Pigment
• ColorDrop
• Material
• LOL Colors

Градієнти:
• Egg gradients
• uiGradients
• WebGradients

Сервіси:
• Color Hex
• Color Picker

Статті на рахунок того, як вибирати колір:
• Color wheel
• How to color

2019 градієнт дизайн колір

немає коментарів

Ізометрія

Що таке ізометрія можна глянути тут.

Я ж в свою чергу хочу лише показати прості приклади того, які роботи можна отримувати за допомогою ізометрії:

На YouTube є багато відеоуроків про те, як створювати ізометрію в Adobe Illustrator. Також раджу почитати, подивитися і послухати ілюстратора Mad Rabbit.

P.S. Навчився створювати ізометрію тут:

Створювати ізометрію за допомогою вбудованого інструменту 3D не варто, тому що будуть проміжки:

2019 Adobe Illustrator авторське дизайн поПрикладу

немає коментарів

Розмиття для блока

Це просто прекрасно. Отримуємо блок, у якого розмитий фон.

index.html

<html>
	<head> 
		<title> Blur </title>
		<link rel="stylesheet" href="style.css">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
		<main>
			<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt architecto possimus nihil quo facilis harum, assumenda illo corporis repudiandae rem provident error qui fuga et porro laboriosam atque est debitis?
			<footer><cite>Unnamed</cite></footer>
			</blockquote>
		</main>
	</body>
</html>

style.css

body {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  font: 150%/1.6 Baskerville, Palatino, serif;
  height: 200vh;
}

main::before {
  background: url("https://avatanplus.com/files/resources/original/57526cb3cfeab15519f89e8c.jpg") 0 / cover fixed;
  background: url("http://hwork.net/files/bg.jpg") 0 / cover fixed;
}

body{
  background: url("http://hwork.net/files/bg.jpg") 0 / cover fixed; 
}

main {
  position: relative;
  margin: 0 auto;
  padding: 1em;
  max-width: 23em;
  background: hsla(0, 0%, 100%, .25) border-box;
  overflow: hidden;
  border-radius: .3em;

}

main::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -30px;
  z-index: -1;
  -webkit-filter: blur(20px);
  filter: blur(20px);
}

Сирцеві файли:
• index.html
• style.css

2019 css html верстання поПрикладу

немає коментарів

Повторюємо дизайн JetBrains

Дана компанія створює не лише прекрасні IDE, а й представлення та дизайн своїх продуктів, елементів фірмового стилю.

Приклади дизайну:

Прекрасно. Все засновано на градієнтах та переходах. Можна спробувати повторити.
Для того, щоб вибрати самі смачні кольори, я скористуюсь кольоровою системою Material Design.

Повторити першу роботу не важко:

Спочатку створюємо еліпси різних кольорів і розмірів. Далі виділяємо їх всіх, вибираємо інструмент Перехід (w) і по черзі з'єднуємо. На наступному кроці додаємо чорний квадрат і центруємо все відносно монтажної області.

Тепер спробуємо зробити і так, як у другій роботі:

Суть така ж сама, як і у попередньому прикладі, але еліпси потрібно витягнути за межі монтажної області. Треба ще додати еліпс і радіальним градієнтом, який іде від жовтого кольору до прозорого.

Далі по списку різноманітні переходи з незвичайними формами:

Нічого складного. Потрібно просто визначити форму за допомогою контура, потім створити перехід. Далі в меню Об'єкт > Перехід > Замінити траєкторію.

Останній приклад розглядатися не буде, тому що там ідуть ті ж самі переходи, але ще для кожного з них визначається прозорість. Дуже яскраве, уміле поєднання кольорів в останньому прикладі.

Мої кольори можуть відрізнятися від оригінальних, тому що я створював все в іншій кольоровій палітрі.Не все могло зійтись на 100%, але у мене і не було мети скопіювати все.

2019 Adobe Illustrator авторське градієнт дизайн поПрикладу

немає коментарів

Худнемо

Лого для тих, хто хоче схуднути.

На лого зображений явно повний чоловік, який біжить до своєї мети:

Поки що рівень не Альбіни, але я стараюсь.
Будемо рости.

2019 Adobe Illustrator авторське градієнт дизайн

немає коментарів

Градієнти та переходи

За допомогою Adobe Illustrator можна творити дива. Сьогоднішня тема по дизайну — градієнти та переходи.

Мабуть, всі зможу створити перехід від одного кольору до іншого, як тут:

(завантажити зображення для робочого столу)

Такий підхід і я часто використовую. Плавний перехід від кольору до кольору — це прекрасно. Багато таких же прикладів можна побачити в природі. Деякі митці черпають звідти свої ідеї.

А що, якщо трішки погратися з формою?

Або ж зовсім її змінити і використати у власних творчих цілях?

(реальний приклад splash screen, який я створив пару років назад)

Інструменти Adobe Illustrator дозволяють робити градієнти різними методами.
Можна створити градієнт за допомогою інструмента Gradient Tool, а можна створити градієнт за допомогою інструмента Blend.

Тоді можна отримати щось більш цікаве:

(створено по інструкції, по відеоуроку)

Або щось таке:

На мою думку, ефективність використання того чи іншого інструмента визначається тим, на скільки красиво створена робота.

Не треба забувати й за Gradient Mesh Tool. Зараз доволі популярно створювати подібні фони:

(робота на 8 березня)

Вершиною всього вищенаписаного являється використання градієнту і переходу разом, щоб можна було добитися взагалі непередбачуваних результатів:

Можна використовувати такий прийом: градієнт для основних форм в переході + сам перехід.
В результаті можна отримати прекрасну форму і яскраві кольори.

2019 Adobe Illustrator авторське дизайн

немає коментарів