Я почну з того, що багато хто може знати... але це не має значення: HTML5 + CSS3 + JS... просто ідеально
Користувач написав мені електронний лист із запитом про підручник для нього по створенню плоских значків - тих, що є плоскими, і це нова мода в Інтернеті. Спеціально розшукується Inkscape o тяганина кнопка в стилі чату або щось, що може служити (або посилання) Snapchat.
Оскільки мені страшно з Inkscape, а також створення вмісту з нуля, навіть із Gimp відстій ... Я згадав, що деякий час тому бачив невеликий веб-додаток (index.html з деякими css та js), що дозволило нам легко і швидко створювати плоскі значки в сучасній моді, знаєте, плоскі дизайни.
Генератор плоских іконок
Він має ряд заздалегідь визначених піктограм, наприклад, значок ноутбука, мобільні пристрої (той, який я показую на скріншоті), подарунок, велосипед ... уфф, їх досить багато, насправді дуже багато:
Але справа не в тому, щоб просто поставити піктограму, і тепер ... ми можемо визначити розмір піктограми або розмір зображення як такого (піктограма + фон) за допомогою двох горизонтальних смуг. Очевидно, ми бачимо квадратний розмір у пікселях ... 256 ... 512 ... тощо
Наступний варіант дозволяє вибрати колір фону, а також колір піктограми. За замовчуванням піктограма біла, а фон синій, так що він не сильно конфліктує.
Нарешті, на цій панелі ліворуч від опцій це дозволяє нам визначити, чи межі піктограми квадратні, чи, з іншого боку, ми хочемо, щоб кінцевий результат був круглим.
Я залишаю вам скріншот з цих опцій:
З іншого боку, у верхній частині він показує нам інформацію про піктограму, яка генерується і змінюється в режимі реального часу. Тобто, якщо ви пограєте з розмірами та кольорами, то побачите, що ця інформація завжди змінюється в режимі реального часу:
Як бачите, у нас також є кнопка Отримати піктограму, який показав би нам значок, вже створений у PNG на іншій вкладці, на якому ми можемо клацнути правою кнопкою миші + Зберегти та вуаля, ми отримаємо плоский значок, який ми генеруємо у потрібній папці на нашому комп'ютері.
Завантажте генератор плоских іконок
Якщо ви хочете спробувати самостійно (що, на мою думку, хай буде ха-ха), ось посилання:
Цим я сподіваюся виконати те, що користувач попросив мене електронною поштою, хоча це не підручник для створення кнопки за допомогою Gimp або Inkscape, ну, я все ще думаю, що вона буде обслуговувати те, що ти хочеш. Насправді ви не можете просто створити кнопку для посилання з завантажити, але він може навіть створити переважну більшість піктограм або кнопок для вашого сайту чи будь-чого, що ви робите
Вітаю і сподіваюся, вам це було цікаво.