طرح برای مبتدیان (دوره رایگان!)

در این دوره رایگان، همه چیزهایی را که برای شروع ساختن وب‌سایت‌ها، برنامه‌ها، آیکون‌ها و موارد دیگر در مورد Sketch نیاز دارید، به طور خلاصه به دست خواهید آورد.

تا زمانی که دوره را کامل کنید که تقریباً دو ساعت و نیم طول می کشد، متوجه خواهید شد که Sketch چیست، چگونه کار می کند و چگونه از ابزارهای مختلف آن برای ساخت پروژه های سفارشی از ابتدا استفاده کنید.

1. خوش آمدید!

درس تصویری را تماشا کنید [0:00] ↗

این دوره به شما همه چیزهایی را که باید در حین یادگیری Sketch بدانید، آموزش می دهد. این یک گزینه عالی برای ایجاد طرح برای کاربران مک است و در مجموعه ویژگی ها و قابلیت خروجی آن بسیار متنوع است. این دوره با فرض اینکه شما یک مبتدی هستید شروع می شود و همه چیز را از UI Sketch و لایه ها تا عملیات Boolean و Smart Layout را پوشش می دهد.

شما می توانید همراه با دوره را دنبال کنید با استفاده از فایل های منبع ایجاد شده به طور خاص برای این دوره.

2. Sketch چیست؟

درس تصویری را تماشا کنید [3:06] ↗

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

از زمان آغاز به کار آن در سال 2010، این نرم افزار توسط بسیاری از افرادی که به دنبال جایگزینی برای فتوشاپ برای ایجاد طرح های رابط کاربری بودند، مورد استفاده قرار گرفته است.

3. تور رابط

درس تصویری را تماشا کنید [8:52] ↗

قبل از شروع، باید در برنامه Sketch با وضعیت زمین آشنا شوید. بیایید نگاهی به ویژگی ها و ابزارهای در اختیار شما در Sketch بیندازیم. شما می توانید با دانلود فایل دمو که قبلاً نام برده شد، همراه باشید مفهوم داشبورد برنامه مالی.

4. کار با انواع مختلف لایه ها

درس تصویری را تماشا کنید [15:43] ↗

لایه ها بلوک های سازنده هر پروژه طراحی در Sketch هستند. و Sketch شامل چندین نوع مختلف است. با بررسی انواع لایه ها از جمله:

• تابلوی هنری
• متن
• شکل
• تصویر

5. گروه بندی، قفل کردن و پنهان کردن لایه ها

درس تصویری را تماشا کنید [27:45] ↗

همانطور که Sketch را یاد می‌گیرید، و شروع به کار روی پروژه‌ها می‌کنید، طبیعی است که با گذشت زمان چندین لایه جمع کنید. خوشبختانه، پس از ایجاد موارد بعدی، چند مورد برای مدیریت آنها وجود دارد. برای مدیریت آسان تر طرح های خود، به جزئیات نحوه گروه بندی لایه ها بپردازید.

به همین ترتیب، یاد بگیرید که چگونه لایه‌ها را قفل کنید تا نتوان آنها را ویرایش کرد و لایه‌ها را برای آزمایش امکانات طراحی خود پنهان کنید.

6. جابجایی، تغییر اندازه و تراز کردن عناصر

درس تصویری را تماشا کنید [36:06] ↗

این درس بسیار مهم است. به هر حال، شما در Sketch به میزان زیادی عناصر را جابه‌جا می‌کنید، اندازه را تغییر می‌دهید، و هم‌تراز می‌کنید، بنابراین برای مدیریت بهتر پروژه‌های طراحی، ضروری است که مراحل انجام این کار را به طور موثر پایین بیاورید.

7. استفاده از راهنماها، گریدها و چیدمان

درس تصویری را تماشا کنید [56:52] ↗

Sketch دارای سه ویژگی به نام‌های Guides، Grids و Layout است که برای تغییر اندازه و تراز کردن محتوا استفاده می‌شود. بیایید در مورد هر یک و نقش آن در توسعه Sketch بیاموزیم.

8. کار با متن

درس تصویری را تماشا کنید [1:06:24] ↗

متن بیشتر محتوایی را که برای پروژه طراحی خود استفاده می کنید تشکیل می دهد. به همین دلیل است که داشتن کنترل مناسب بر ظاهر متن شما بسیار مهم است. Sketch ابزارهای دستکاری متن قوی را برای تغییر اندازه و تنظیم متن و سبک متن ارائه می دهد. بیایید نحوه استفاده از آنها را بیاموزیم.

9. اضافه کردن و ویرایش اشکال

درس تصویری را تماشا کنید [1:17:52] ↗

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

10. استفاده مجدد از شکل ها و سبک ها

درس تصویری را تماشا کنید [1:36:45] ↗

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

11. کار با تصاویر

درس تصویری را تماشا کنید [1:48:23] ↗

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

12. با استفاده از ابزار Vector

درس تصویری را تماشا کنید [1:56:30] ↗

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

13. کار با عملیات Boolean

درس تصویری را تماشا کنید [2:05:14] ↗

عملیات بولی برای ایجاد اشکال پیچیده عالی هستند. اما در Sketch، آنها برای ایجاد آیکون ها فوق العاده هستند. این درس به بررسی این که عملیات بولی چیست و تمام کارهای قدرتمندی که می توانید با آنها انجام دهید می پردازد.

14. استفاده مجدد از عناصر از طریق نمادها

درس تصویری را تماشا کنید [2:15:04] ↗

در Sketch، استفاده از نمادها به معنای استفاده مجدد از محتوا است. و با انجام این کار شما در واقع سرعت کار خود را افزایش می دهید. نکته خوب در مورد Symbols این است که هر زمان که تغییری در Master Symbol ایجاد کنید، تمام نمونه های دیگر آن تغییرات را به طور خودکار دریافت می کنند.

15. طرح بندی هوشمند

درس تصویری را تماشا کنید [2:25:15] ↗

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

16. صادرات از Sketch

درس تصویری را تماشا کنید [2:30:36] ↗

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

دوره های رایگان بیشتر در Tuts+

عازم؟ همه چیزهایی را که باید در مورد طراحی و توسعه وب بدانید، در اینجا در Tuts+ بیاموزید.