آموزش هنر و کد: ایجاد و کدگذاری یک تصویر اختلاف منظر تعاملی
Art & Code: Create and Code an Interactive Parallax Illustration
از لایه‌ها و کد استفاده کنید تا بُعد جدیدی به آثار هنری خود اضافه کنید!
در این کلاس با استفاده از Procreate همراه با HTML5، CSS و جاوا اسکریپت، یک تصویر اختلاف منظر تعاملی ایجاد خواهید کرد. من سعی کرده‌ام آن را از طراحی ساده و ترسیم تا چیزهای کدنویسی پیچیده‌تر در پایان سازماندهی کنم، بنابراین امیدوارم هر چقدر هم که آن را طولانی کنید، بتوانید چیزی یاد بگیرید! همچنین مطمئن شوید که بخش پروژه را برای کد نمونه تکمیل شده که می توانید با آن مقایسه کنید، بررسی کنید.
چند مورد را که در این مسیر پوشش خواهیم داد:
- QuickMenu، Layer Select، QuickShape و موارد دیگر در Procreate
- برخی از مبانی HTML5، CSS، و جاوا اسکریپت
- رویدادها را در جاوا اسکریپت لمس و ماوس کنید
- دسترسی به ژیروسکوپ در جاوا اسکریپت
- بوم HTML5 و requestAnimationFrame
ابزارهای مورد استفاده در این آموزش عبارتند از:
- iPad Pro 12.9 اینچی با قلم اپل و صفحه کلید هوشمند صفحه کلید
- (شما می توانید از هر نرم افزار تصویرسازی مبتنی بر لایه استفاده کنید، اما من Procreate را ترجیح می دهم)
-
- یک جایگزین رایگان برای iPad است، اما من به جزئیات زیادی در مورد نحوه استفاده از آن نمی پردازم.
- سافاری در iPad
این یک کلاس پیشرفته است—من زمان زیادی را صرف بررسی نحوه کارم در Procreate نمی‌کنم، اما اگر به دنبال چیزی شبیه به آن هستید، کلاس قبلی Skillshare من را بررسی کنید. (هر چند چیزهای جدیدی در این مورد وجود دارد!)
در حالی که سعی می‌کنم همه چیز را تا حد امکان ساده نگه دارم، اگر آشنایی اولیه با توسعه وب داشته باشید، این کار آسان‌تر خواهد بود. در اینجا برخی از منابع مفید HTML، CSS و جاوا اسکریپت آمده است:
- تعداد زیادی دوره در Skillshare! نگاهی به اطراف بیندازید.
- (رایگان—در ابتدا از اینجا شروع کردم)
(همچنین هنگام ضبط برخی از اینها کمی مریض بودم، پس لطفاً هر گونه بو کشیدن عجیب را ببخشید
یک تصویر اختلاف منظر ایجاد کنید و یک ویدیو از آن پست کنید! (و اگر پروژه را در جایی منتشر کردید، حتماً پیوندی به پروژه اضافه کنید!)
من تمام کدها و تصاویر پروژه تمام‌شده‌ام و همچنین نقاط توقف در مسیر را برای شما قرار داده‌ام تا در صورت گیرکردن با آنها مقایسه کنید.
موفق باشید!
درس ها Lessons
-
ضمیمه 1 پشتیبانی از iOS 13 Appendix 1 iOS 13 Support
-
کدگذاری 5 کنترل حرکت Coding 5 Motion Controls
-
کدگذاری 6 لمس پایانی Coding 6 Finishing Touches
-
کدنویسی 1 آماده سازی لایه های شما Coding 1 Preparing Your Layers
-
ضمیمه 2 اشکال زدایی اساسی Appendix 2 Basic Debugging
-
Drawing 3 Blocking in Colors Drawing 3 Blocking in Colors
-
طراحی 2 اصلاح طرح شما Drawing 2 Refining Your Sketch
-
طراحی 1 مفهوم و ریز عکسها Drawing 1 Concept and Thumbnails
-
کدگذاری 4 کنترل لمسی و ماوس Coding 4 Touch and Mouse Controls
-
کدنویسی 3 طراحی روی بوم Coding 3 Drawing to the Canvas
-
مقدمه Intro
-
کدنویسی 2 HTML، CSS و جاوا اسکریپت Coding 2 HTML, CSS, and JavaScript
https://donyad.com/d/8670
Jarom Vogel
تصویرگر دیجیتال
Jarom Vogel یک تصویرگر مستقل است که گهگاه به حرکت، طراحی و توسعه می پردازد. او از سواحل، بستنی های خوب، کک وانیلی، فن آوری، اسکی و درست کردن چیزها لذت می برد. او در سال 2015 با مدرک BFA در تصویرسازی از دانشگاه بریگهام یانگ فارغ التحصیل شد.
مشتریان قبلی عبارتند از Apple، Procreate، Nobrow/Flying Eye Books، First Round Capital، HarperCollins UK، Aquila Magazine، Harmonix Music و Cotopaxi.
نمایش نظرات