آموزش طرح: ایجاد SVG Responsive

Sketch: Creating Responsive SVG

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.

نمونه ویدیوها: (صرفا برای مشاهده نمونه ویدیو، ممکن هست نیاز به شکن داشته باشید.)

توضیحات دوره: فرمت Graphics Vector Scalable (SVG) از این نظر متمایز است که می تواند CSS مخصوص خود را داشته باشد و به آن امکان می دهد تا به اندازه نمایشگر خود پاسخ دهد. در این دوره مختصر ، یاد بگیرید که چگونه از Sketch و CSS برای ایجاد یک فایل SVG پاسخگو استفاده کنید. Chris Converse نحوه ترکیب نسخه های مختلف یک گرافیک برای به حداکثر رساندن تأثیر آن در اندازه های مختلف صفحه و همچنین نحوه صادرات فایل های SVG از Sketch را نشان می دهد. او همچنین نشان می دهد که چگونه می توان کمی CSS اضافه کرد و با استفاده از کوئری های رسانه ، گرافیکی را پاسخگو کرد. پس از اتمام دوره ، خواهید فهمید که چگونه یک فایل SVG منفرد ایجاد کنید که بتواند خود را بر اساس اندازه روی صفحه تغییر و سازگار کند.

سرفصل ها و درس ها

مقدمه Introduction

پاسخگو SVG با Sketch Responsive SVG with Sketch

1. یک آرم Multiversion را در Sketch بسازید 1. Construct a Multiversion Logo in Sketch

آرم ها را با یک Sketch در یک کادر هنری واحد ترکیب کنید Combine logos into a single artboard with Sketch
فایل های SVG را از Sketch صادر کنید Export SVG files from Sketch
اضافه کردن CSS به پرونده SVG Adding CSS to an SVG file
نمایش نمایش و پنهان کردن آرمها با نمایش داده شدگان رسانه CSS Show and hide logos with CSS media queries