Art & Code: Create and Code an Interactive Parallax Illustration

Utilisez des calques et le code pour ajouter une nouvelle dimension à votre œuvre d'art !

Dans ce cours, vous créerez une illustration de parallèles interactive à l'aide de Procreate avec HTML5, CSS, et JavaScript. J'ai essayé de l'organiser, de la simple dessiner et de les points de codage plus complexes à la fin de la loi. J'ai donc trouvé que vous avez trouvé le degré Assurez-vous également de consulter la section du projet pour le code d'exemple terminé à la valeur que vous pouvez comparer.

Quelques éléments que nous aborderons au cours du cours :

• QuickMenu, sélection du calque, QuickShape, et plus plus encore dans Procreate
• Certaines bases de HTML5, CSS, et JavaScript
• Les événements de l'enfoncement Touch et de souris dans Javascript
• Accéder au gyroscope dans JavaScript
• toile et requestAnimationFrame

Les outils utilisés dans ce tutoriel comprennent :

• iPad Pro 12.9 po
• Procreate (vous pouvez utiliser n'importe quel logiciel d'illustration basé sur des calques, mais je préfère Procreate)
• Coda
  • Une alternative gratuite pour iPad est JavaScript Anywhere, mais je ne vais pas aborder les détails de la comment l'utiliser.
• Safari sur iPad

Il s'agit d'un cours avancé, je ne passe pas un cours de temps sur la façon de travailler dans Procreate, mais si vous êtes à la recherche de quelque chose de plus comme ça, consultez mon cours Skillshare précédent ici. (Il y a un peu de nouvelles choses dans ce cours !)

Bien que j'essaie de garder les choses aussi simples possible, ce sera la plus facile si vous avez une connaissance de base du développement web. Voici quelques ressources utiles en HTML, CSS, et JavaScript :

• De nombreux cours sur Skillshare ! Jetez un coup de tour.
• w3schools (free—this ce que j'ai commencé à l'origine)
• Codecademy - Introduction à l'HTML
• Codecademy - Apprenez CSS
• Codecademy - Introduction à Codecademy

(J'ai également été un petit malade pendant l'enregistrement d'un cas. Il de s'excuse tout cas.