اگر می‌خواهید یک هدر را متحرک کنید، تبلیغات بنری بسازید، یا یک اینفوگرافیک ایجاد کنید، پل ترانی می‌تواند در این دوره با استفاده از Adobe Animate CC به شما نشان دهد که چگونه – و این کار را انجام می‌دهد. او نحوه ایجاد گرافیک و متن، وارد کردن طرح‌ها و عکس‌ها و جان بخشیدن به اشیا را با استفاده از انیمیشن و تعامل نشان می‌دهد. او همچنین فرآیند انتشار را برای خروجی به پلتفرم های متعدد مانند HTML، SWF، SVG و WebGL نشان می دهد. از آنجایی که اصول ایجاد و متحرک سازی فراتر از پروژه های برجسته است و می تواند در چندین سناریو مورد استفاده قرار گیرد، این دوره می تواند به هر طراح وب کمک کند تا قابلیت های قوی Adobe Animate CC را کشف کند.

کارآمدترین راه برای ایجاد انیمیشن های تعاملی برای پروژه های وب، موبایل و دسکتاپ را با Adobe Animate CC، نسخه تازه راه اندازی شده Flash Professional بیاموزید. این دوره مبتنی بر پروژه دارای دو تکلیف است: یک بنر وب متحرک که به حرکت ماوس، ورودی لمسی و کلیک ها پاسخ می دهد و یک انیمیشن تعاملی سه حالته که مانند یک بازی بازی می کند. جوزف لابرک نشان می‌دهد که چگونه می‌توان فضای کاری Animate را تنظیم کرد، صحنه را آماده کرد، از گردش‌های کاری مبتنی بر فریم کلیدی و رویه‌ای، ایجاد عناوین و تعاملات برنامه‌ای استفاده کرد. بعلاوه، یاد بگیرید که چگونه هر دو انیمیشن تکمیل شده را در یک صفحه وب پاسخگو مستقل ادغام کنید.

رابط های خود را بیشتر فشار دهید و با ادغام انیمیشن ها در سراسر سایت، وب سایت ها را جذاب تر کنید. در این دوره، یاد بگیرید که چگونه از CSS برای ترکیب انیمیشن های تعاملی که ویژگی ها و طرح بندی ها را بهبود می بخشد، استفاده کنید. اصول و بهترین شیوه هایی را که باید برای استفاده شما از انیمیشن راهنمایی کند، بررسی کنید. نحوه استفاده از انتقال، انیمیشن‌های فریم کلیدی و تبدیل‌ها را برای ارائه تجربه کلی بهتر به کاربران بیابید. اهمیت تنظیم دقیق مدت زمان، سرعت و رقص عناصر پویا را کشف کنید. ببینید چگونه دکمه‌ها، منوها و کارت‌ها را سرگرم‌کننده‌تر و جذاب‌تر کنید. در حین بررسی استفاده از حرکت در رابط کاربری، تئوری ها، کاربردهای عملی و موارد دیگر را در نظر بگیرید.

برگه‌های اسپرایت CSS دریچه دیگری را برای حرکت وب باز کرده‌اند و به شما این امکان را می‌دهند که به طور موثر مجموعه‌ای از تصاویر را متحرک کنید - از حالت دکمه گرفته تا حالت کاراکتر. در این دوره سریع، تام گرین به شما نشان می‌دهد که چگونه می‌توانید چرخه راه رفتن یک کاراکتر را با ایجاد یک صفحه sprite در Flash، ویرایش در Fireworks و قرار دادن آن در حرکت (و در HTML خود) با Edge Animate متحرک کنید.

به انیمیشن گیف پایین نگاه کنید: در حال بازگشت به وب، ظاهر شدن به عنوان یک پیش بارگذاری یا نشان دهنده بارگیری محتوای سایت است. به تام گرین بپیوندید، زیرا او به شما نشان می دهد که چگونه در این قسمت از Web Motion برای مبتدیان، پیش بارگذاری کننده مبتنی بر GIF خود را بسازید. شما یاد خواهید گرفت که چگونه یک سری انفجار به سبک آتش بازی را از After Effects صادر کنید، یک GIF متحرک در Photoshop یا Fireworks (به انتخاب شما) ایجاد کنید، و GIF را به عنوان یک پیش بارگذاری در Edge Animate قابل استفاده کنید.

یاد بگیرید که یک بنر وب ساده با حرکت و تعامل ایجاد کنید. این قسمت از Web Motion برای مبتدیان به شما نشان می‌دهد که چگونه یک پروژه مشتری را از مفهوم به اتمام برسانید - در این مورد برای یک آگهی تبلیغاتی که بینندگان را دعوت می‌کند از انتاریو، کانادا بازدید کنند. تام گرین نشان می‌دهد که چگونه با طرح‌ها و فریم‌های سیمی بر روی یک ایده اولیه بسازید و دارایی‌های تصویر خود را در Adobe Photoshop و Illustrator ایجاد کنید. سپس تبلیغ را در Edge Animate جمع آوری کرده و دکمه های تعاملی را با ویژگی Gradient ایجاد می کنید.

با ورود صفحه نمایش های جدید خیره کننده مانند صفحه نمایش Apple Retina به بازار، بسیاری از طراحان می خواهند یاد بگیرند که چگونه سایت های خود را برای شبکیه چشم آماده کنند. این دوره چندین گزینه برای بهینه سازی گرافیک و سایر مطالب ارائه می دهد تا در نمایشگرهای شبکیه (یا HiDPI) و غیر شبکیه به طور یکسان عالی به نظر برسد. نویسنده برایان وود شامل ترکیب فونت‌های آیکون و فاویکون‌ها، بهینه‌سازی تصاویر SVG و درون خطی، و نمایش تصاویر واکنش‌گرا با استفاده از CSS، جاوا اسکریپت و راه‌حل پلی‌فیل PictureFill است.

توسعه‌دهندگان جاوا اسکریپت می‌توانند گرافیک‌های آزاد را روی سطح طراحی به نام Canvas ایجاد کنند. Canvas توانایی ایجاد برنامه های وب غنی و بومی را با گرافیک های دو بعدی و سه بعدی باز می کند. در این دوره، مربی جو مارینی مفاهیم فنی پشت Canvas را معرفی می کند و نحوه انجام عملیات ترسیم را به طور مستقیم در یک صفحه وب نشان می دهد. یاد بگیرید که چگونه اشکال اساسی و پیچیده را بکشید، رنگ ها و سبک ها را تنظیم کنید و سایه ها، الگوها و شیب ها را اضافه کنید. سپس تکنیک های پیشرفته تری مانند مقیاس بندی، چرخش و ترکیب اشیاء را کشف کنید. به‌علاوه، نحوه استفاده از عناصر Canvas را برای ساخت یک نمایش اسلاید با ویژگی‌های کامل و یک انیمیشن دو بافری کشف کنید.

چرا خود را به تصاویر درون خطی و متن ثابت محدود کنید، به خصوص در دوران چند پلتفرمی ما؟ رسانه های واکنش گرا به شما امکان می دهند محتوای بیشتری را با افراد بیشتری به اشتراک بگذارید. آنچه را که برای ساختن صفحات غنی از تصویر و تایپوگرافی (با ویدیوی HTML5!) که به درستی در دستگاه های مختلف نمایش داده می شود، بدانید. کریستوفر اشمیت همچنین به شما نشان می‌دهد که چگونه طرح‌بندی‌های با عرض ثابت را به طرح‌بندی‌های شبکه‌ای سیال تبدیل کنید که با اندازه‌های مختلف صفحه‌نمایش سازگار هستند، از پرسش‌های رسانه‌ای برای ارائه تجربیات طراحی سفارشی استفاده کنید، و تصاویر PNG، JPEG و SVG را آماده و بازیابی کنید تا بهترین ظاهر را داشته باشند. .

سینماگراف ها عکس های ثابتی هستند که دارای نواحی حرکتی هستند. این گرافیک های تخصصی - که اساساً GIF های متحرک و پیشرفته هستند - می توانند برای تبلیغات پویا یا کمک به برجسته شدن شما در رسانه های اجتماعی استفاده شوند. در این دوره آموزشی، نحوه استفاده از فتوشاپ، افتر افکت و ابزارهای دیگر را برای کشف گزینه های خلاقانه سینماگراف ها بیاموزید. علاوه بر این، نحوه ایجاد پلاتوگرافی با Plotagraph Pro را بیاموزید که به شما امکان می دهد محتوای پویا از عکس های ثابت ایجاد کنید. در حالی که پلاتوگرافی شبیه به سینماگراف است، نقطه شروع و اجرا بسیار متفاوت است.\r\n\r\n در طول دوره، ریچ تکنیک های مفید تیراندازی و پس از تولید را به اشتراک می گذارد تا به شما در بهبود نتایج نهایی کمک کند.

اگر فکر می کنید فونت های نماد متوقف می شوند و با Dingbats شروع می شوند، دوباره فکر کنید. فونت های آیکون جدید مدرن، سرگرم کننده هستند و به شما امکان می دهند آثار هنری برداری مقیاس پذیر را با یک ضربه کلید به طرح های خود اضافه کنید. به احتمال زیاد شما آنها را در عمل دیده اید، اما ممکن است دقیقاً در مورد نحوه ایجاد خود کاملاً واضح نباشید. در این دوره، نویسنده ارشد جیمز ویلیامسون توضیح می‌دهد که فونت‌های آیکون چیست و چگونه کار می‌کنند، و مجموعه‌ای از ابزارها را برای تولید فونت‌های آیکون مرور می‌کند: خدمات آنلاین مانند Fontello، برنامه‌های ترسیم برداری مانند Illustrator، و نرم‌افزار ایجاد فونت مانند Glyphs Mini. او همچنین نکاتی در مورد طراحی و سازماندهی حروف، وارد کردن آثار هنری، صادرات فونت و تولید فونت های وب سازگار با مرورگرهای متقابل ارائه می دهد.

rnrn

 ایجاد گرافیک آسان است. اما ایجاد گرافیک های بهینه شده که عالی به نظر می رسند و به سرعت در دستگاه های مختلف بارگیری می شوند می تواند یک کار کاری باشد. برای به دست آوردن گرافیک زیبا هر بار باید در مورد بهترین قالب های پرونده و تکنیک های تولید بیاموزید. در این دوره ، مربی امانوئل هنری شما را در یک سری از دروس آسان برای دنبال کردن به دنیای بهینه سازی تصویر دیجیتال می برد که می توانید برای نرم افزار طراحی گرافیک مورد نظر خود استفاده کنید.

کشف کنید که چگونه فشرده سازی تصویر کار می کند و چگونه بر کیفیت تصویر ، اندازه و وضوح تأثیر می گذارد. جوانب مثبت و منفی قالب های مختلف پرونده های تصویری را بیاموزید ، چه موقع استفاده کنید ، چگونه و چرا ، از جمله نکاتی برای بهینه سازی JPEG ها ، GIF ها ، PNG ها و SVG ها در طول مسیر. در پایان این دوره ، شما نه تنها می دانید که چگونه تصاویر شما بهینه شده اند ، بلکه نحوه ارزیابی و آزمایش تأثیر آنها در وب سایت خود را نیز می دانید.

Web Motion برای مبتدیان مجموعه ای از دوره هایی است که برای معرفی شما با زمینه نوظهور موشن گرافیک برای وب طراحی شده است. با این دوره شروع می شود، مروری بر فرآیند برنامه ریزی و ایجاد. نویسنده تام گرین به شما یادآوری می کند که به دنیای اطراف خود توجه کنید و بر اهمیت استوری بورد، برنامه ریزی پروژه و انتخاب ابزار تأکید می کند.

آیا تا به حال فکر کرده اید که همه برنامه های Adobe Creative Cloud چه کار می کنند؟ این دوره برای شماست. همه چیزهایی را که Creative Cloud ارائه می دهد کاوش کنید و بهترین ویژگی ها را در هر ابزار کشف کنید. بر روی حوزه‌هایی تمرکز کنید که به شما علاقه دارند یا کل دوره را تماشا کنید تا پایه‌ای قوی بر روی مجموعه ابزار کامل Adobe داشته باشید. در اینجا برای هر حرفه ای خلاق چیزی وجود دارد. مربی پل ترانی برنامه های طراحی و تصویرسازی، عکاسی، ویدئو، سه بعدی، انیمیشن، طراحی وب و تجربه کاربری را به تصویر می کشد. به علاوه، یاد بگیرید که چگونه با استفاده از خدمات Adobe مانند Behance و Portfolio، کار خود را به صورت آنلاین به نمایش بگذارید.

در این راهنما با نویسنده ارشد جیمز ویلیامسون، تکنیک ها و بهترین روش ها برای طراحی آیکون های وب هوشمند و جالب بصری در هر نرم افزاری را بیاموزید. ابتدا، دریابید که چه چیزی آیکون ها را مؤثرتر می کند و چگونه از همان ابتدا طرح خود را برنامه ریزی کنید. سپس بهترین شیوه ها را برای طوفان فکری، ترسیم ایده های خود و یافتن استعاره های بصری مناسب مرور کنید. جیمز نشان می‌دهد که چگونه می‌توانید طرح‌های خود را با وضوح بالا بسازید و تغییراتی ایجاد کنید که در اندازه‌های کوچک‌تر کار کنند. در نهایت، یاد بگیرید که چگونه کار خود را به چندین نوع فایل صادر کنید و SVG ها را که یکی از محبوب ترین فرمت های نمادها هستند، بهینه کنید.

یاد بگیرید که با CSS3 تصاویر متحرک ایجاد کنید. جابجایی های متحرک راهی آسان برای بهبود تجربه کاربری وب سایت شما، بدون افزودن نشانه گذاری بیشتر به صفحه شما، یا کار با جاوا اسکریپت است. نویسنده کریس کانورس نشان می‌دهد که چگونه می‌توانید رنگ و تایپوگرافی رول‌اورهای خود را با استفاده از ویژگی‌های مختلف CSS تغییر دهید، عناصر شبه را اضافه و متحرک کنید، و ویژگی‌های کلیپ عناصر دارای موقعیت مطلق را متحرک کنید. فایل‌های تمرین برای همه اعضا رایگان است، بنابراین آن‌ها را دانلود کنید و همین امروز شروع به تقویت وب‌سایت خود کنید.

آموزش ایجاد یک انیمیشن وب از یک فایل Illustrator ساده، با Ai2Canvas—یک افزونه رایگان که تقریباً با هر نسخه از Illustrator، از CS3 تا CC، کار می کند. در این پروژه کوتاه طراحی وب، کریس کانورس نحوه دستیابی به انیمیشن های پیچیده با Ai2Canvas را به سادگی با نامگذاری لایه های خود با ویژگی های مختلف انیمیشن نشان می دهد. او همچنین نشان می دهد که چگونه می توان ویژگی هایی مانند چرخش و مبدا را برای طراحی های حرکتی جالب تر ترکیب کرد و فایل های پروژه را برای تحویل وب فشرده کرد. فایل های تمرین این دوره برای همه اعضای lynda.com رایگان است، پس همین امروز آن ها را دانلود کنید.

فایل‌های PNG-24 کیفیت فوق‌العاده‌ای را با مزیت اضافه شفافیت 8 بیتی ارائه می‌کنند. با این حال، این فرمت فایل خاص می تواند نسبتاً بزرگ باشد. و اندازه فایل های بزرگتر به معنای زمان بارگذاری طولانی تر برای کاربران شما است. خبر خوب این است که می‌توانید فایل‌های شفاف PNG-8 مختلفی ایجاد کنید - فایل‌هایی که بین ۶۰٪ تا ۸۰٪ کوچکتر از فایل‌های PNG-24 هستند - با برش جدیدی از Windows، Mac و ابزارهای مبتنی بر وب. کریس کانورس به شما نشان می دهد که در این دوره آموزشی کوتاه و روشنگر، چگونه PNG های فشرده ایجاد کنید که به زیبایی در انواع وب سایت ها، به ویژه آنهایی که دستگاه های تلفن همراه را هدف قرار می دهند، نمایش داده می شوند.

طراحی وب به طراحان نشان می‌دهد که چگونه گرافیک‌ها و طرح‌بندی‌های کارآمد و زیبا را از ابتدا بسازند. در این قسمت، کریس کانورس نحوه ایجاد گرافیک های جدید SVG و سپس تبدیل آنها به نمادهای قابل استفاده مجدد با Adobe Illustrator را توضیح می دهد. سپس او نشان می دهد که چگونه با ویرایش موقعیت، تغییر شکل و ویژگی های رنگ هر نمونه ای که قرار می دهید، نمادها را متناسب با طرح بندی خود سفارشی کنید. این تکنیک به شما این امکان را می دهد که گرافیک های پیچیده را بسیار سریعتر از آنچه که می توانید از ابتدا طراحی کنید بسازید. فایل‌های تمرین برای همه اعضا در دسترس است، بنابراین آنها را دانلود کنید و همین امروز شروع به ایجاد گرافیک‌های وب غنی خود کنید.

rnrn

بیاموزید که گرافیک و عناصر شبه را ترکیب کنید تا امکان طراحی و چیدمان بیشتر را بدون افزودن HTML بیشتر به صفحات وب خود اضافه کنید. ترکیب گرافیک های وب و شبه عناصر CSS3 به شما امکان می دهد به متن استایل دهید، گرافیک اضافه کنید، و اشیاء را در موقعیت قرار دهید، همگی در حالی که HTML خود را تمیز و منظم نگه می دارید و عناصر پاسخگوی طراحی خود را قربانی نمی کنید.

rnrn مفتخریم که میزبان این آموزش در کتابخانه خود باشیم.