رسم شکل ها (Shape) یکی از رایج ترین انواع لایه ها در طراحی های رابط کاربری در نرم افزار Sketch هستند. می توانید اشکال از پیش ساخته شده را به محیط Sketch اضافه و ویرایش کنید، یا با استفاده از ابزار Vector، شکل های خود را ایجاد کنید. در این مرحله از آموزش کار با نرم افزار طراحی رابط کاربری Sketch به شما خواهیم گفت که چگونه شکل ها را به طراحی خود اضافه کنید و روی آن ها تغییرات انجام دهید.
اضافه کردن اشکال
یکی از رایج ترین کارهایی که در طراحی رابط کاربری پیش می آید، اضافه کردن Shape جدید به محیط sketch شماست.
نحوه اضافه کردن اشکال از پیش ساخته شده
برای افزودن یک Shape جدید، روی دکمه Insert در نوار ابزار Sketch یا درج آیتم در نوار منو کلیک کنید، گزینه Shape را انتخاب کنید و سپس نوع شکلی را که می خواهید به رابط کاربری خود در Sketch اضافه کنید انتخاب کنید. همچنین می توانید از میانبر های صفحه کلید زیر برای اضافه کردن برخی از اشکال از پیش ساخته استفاده کنید:
برای افزودن شکل خود، روی هر جایی از بوم یا تابلوی هنری خود کلیک کرده و بکشید. در حین کشیدن، ابعاد شکل را در کنار مکان نما خواهید دید. ⇧ را در حالی که روی shape کلیک کرده اید و آن را می کشید نگه دارید تا ارتفاع و عرض شکل شما برابر شود.
هنگام کلیک کردن، ⌥ را نگه دارید تا شکل خود را از مرکز آن بکشید (به جای بالا سمت چپ).
هنگامی که روی شکل کلیک می کنید، نوار Space را نگه دارید و بکشید تا مبدا شکل خود را بر خلاف اندازه آن تغییر دهید (اگر از جای اشتباه شروع کرده اید برای شما مفید است).
نحوه اضافه کردن اشکال با ابزار Pencil
کلید P را فشار دهید یا ابزار Pencil را از منوی Insert انتخاب کنید تا ابزار Pencil فعال شود. از آنجا می توانید هر شکلی را که دوست دارید بکشید. وقتی طراحی shape خود را در رابط کاربری مورد نظر تمام کردید، برنامه Sketch منحنی ها را صاف می کند و مسیری که ایجاد کرده اید را ساده می کند.
نحوه اضافه کردن اشکال از طریق کد SVG
می‌توانید با کپی و چسباندن کد SVG در هر جایی از بوم رابط کاربری Sketch خود، لایه‌های شکل جدیدی ایجاد کنید.
ویرایش Shapes
هر شکلی که به طراحی ما اضافه می شود نیاز به ادیت کردن و سفارشی سازی ارد که در ادامه به بررسی کامل آن خواهیم پرداخت.
نحوه ویرایش اشکال در Inspector
هنگامی که یک شکل را انتخاب می کنید، گزینه هایی برای ویرایش آن شکل در Inspector خواهید دید. برای مثال، ابزار ستاره به شما امکان می دهد شعاع و تعداد نقاط آن را تنظیم کنید.
نحوه ویرایش گوشه های shape
روی یک مستطیل گرد کلیک کنید تا شعاع گوشه های آن در Inspector تنظیم شود.
شما می توانید بین گوشه های گرد و صاف انتخاب کنید و نحوه ترسیم گوشه های لایه را تغییر دهید. گوشه های صاف دارای تداوم انحنا هستند و به شما امکان می دهند “squircles” ایجاد کنید، شکلی که اپل در رابط های خود استفاده می کند.
نکته: وقتی در حالت ویرایش برداری هستید، می‌توانید یک نقطه گوشه جداگانه را برای تنظیم شعاع یک گوشه انتخاب کنید.
نحوه flip کردن اشکال
با استفاده از دو دکمه در Inspector می توانید اشکال را به صورت افقی برگردانید. این دکمه‌ها انتخاب می‌شوند (بنابراین می‌توانید دوباره کلیک کنید تا تغییر را معکوس کنید) مگر اینکه شکل را صاف کنید و تغییرات را با استفاده از Layer > Combine > Flatten انجام دهید.
نحوه چرخش اشکال
چند راه برای چرخاندن Shape های رابط کاربری شما در برنامه Sketch وجود دارد. می توانید مقداری را بر حسب درجه در Inspector وارد کنید. این می تواند یک مقدار مثبت یا منفی برای چرخش به ترتیب در جهت عقربه های ساعت یا خلاف جهت عقربه های ساعت باشد.
یا می توانید شکل خود را انتخاب کنید و روی دکمه Rotate در نوار ابزار کلیک کنید. سپس روی هر جایی خارج از شکل خود کلیک کرده و بکشید تا آن را بچرخانید. برای تغییر محوری که شکل شما بر روی آن می‌چرخد، کافی است روی نقطه‌ای که می‌خواهید به دور آن بچرخید، بر روی آن کلیک کنید و آن را در مرکز آن بکشید. برای تنظیم مجدد این، به سادگی شکل خود را دوباره انتخاب کنید.
در نهایت، با نگه داشتن ⌘ و کشیدن یکی از دستگیره‌های انتخاب آن، می‌توانید به سرعت هر شکلی را که انتخاب کرده‌اید بچرخانید.
نگه داشتن ⇧ هنگامی که یک شکل را می چرخانید، این کار را با افزایش 15 درجه انجام می دهد. شما می توانید این تغییرات را انجام دهید و با صاف کردن شکل (Layer > Combine > Flatten) مقدار چرخش را به 0 درجه تنظیم کنید.
نحوه ویرایش اشکال در حالت برداری
برای ویرایش یک شکل در حالت ویرایش برداری، روی آن دوبار کلیک کنید یا آن را انتخاب کنید و کلید Enter را فشار دهید. وقتی وارد حالت ویرایش برداری می‌شوید، نقاط دایره‌ای را می‌بینید که توسط مسیرهایی به هم متصل شده‌اند. روی هر یک از نقاط دایره ای کلیک کنید و آنها را بکشید تا شکل یک لایه تغییر کند.
برای افزودن یک نقطه جدید، ماوس را روی مسیری بین دو نقطه ببرید و برای درج نقطه جدید کلیک کنید. برای حذف یک نقطه، آن را انتخاب کرده و کلید Backspace را فشار دهید.
بسته به نوع نقطه ای که آن ها را به هم متصل می کند، مسیرهای بین نقاط مختلف شکل شما می تواند خطوط مستقیم یا منحنی باشد. روی نقطه ای که مسیرهای مستقیم را به هم متصل می کند دوبار کلیک کنید تا آن را به یک مسیر منحنی تغییر دهید.
هنگامی که یک نقطه را برای ایجاد یک مسیر منحنی تغییر می دهید، می توانید از دو نقطه کنترل دسته که به نظر می رسد برای ویرایش خود منحنی استفاده کنید.
صاف کردن شکل خود (با انتخاب ابزار Layer > Combine > Flatten Flatten) نقاطی را در هر انتهای منحنی ایجاد می کند.
نحوه ویرایش اشکال با استفاده از ابزار Transform
برای استفاده از ابزار Transform، یک یا چند شکل را انتخاب کنید و به Layer > Transform > Transform بروید. یا می توانید از میانبر صفحه کلید ⌘ ⇧ T استفاده کنید. شما همچنین می توانید ابزار Transform را از طریق View > Customize Toolbar به نوار ابزار خود اضافه کنید.
ابزار Transform نقاطی را به هر گوشه از Shape شما و همچنین نقاط بین هر گوشه رابط کاربری شما در برنامه Sketch اضافه می کند. روی یک نقطه کلیک کنید و آن را بکشید تا Shape شما تغییر شکل دهد و کج شود.
اگر روی نقطه ای بین دو گوشه کلیک کرده و بکشید، هر دو گوشه را همزمان جابه جا می کنید.
هنگامی که روی یک نقطه گوشه کلیک کرده و بکشید، گوشه مقابل به طور همزمان در جهت مخالف حرکت می کند. برای کنترل فقط یک گوشه، ⌘ را نگه دارید.
نحوه ویرایش اشکال با استفاده از ابزار Scissor
می توانید از ابزار Scissor برای جدا کردن مسیرها از اشکال استفاده کنید. برای انجام این کار، شکل مورد نظر برای ویرایش را انتخاب کنید، ابزار را از طریق Layer > Path > Scissors فعال کنید (همچنین می توانید آن را از طریق View > Customize Toolbar… به نوار ابزار خود اضافه کنید) و روی هر یک از مسیرهایی که شکل شما را تشکیل می دهند کلیک کنید. آن ها را حذف کنید.
وقتی کارتان تمام شد، خارج از شکل کلیک کنید یا Enter یا Esc را فشار دهید.
نحوه ویرایش اشکال با ابزار Rotate Copies
ابزار Rotate Copies یک Shape را می گیرد و کپی هایی از آن را حول یک نقطه از رابط کاربری شما در برنامه Sketch می چرخاند. برای استفاده از آن، یک شکل را انتخاب کنید و به Layer > Path > Rotate Copies بروید (همچنین می توانید یک دکمه برای آن از طریق View > Customize Toolbar…) به نوار ابزار خود اضافه کنید. از آنجا، تعداد کپی هایی را که می خواهید ایجاد کنید انتخاب کنید و روی OK کلیک کنید.
از دسته ای که به نظر می رسد برای تنظیم دقیق نحوه قرارگیری کپی ها استفاده کنید. وقتی کارتان تمام شد، Esc یا Enter را فشار دهید.
توجه: در نسخه 53.1 برنامه Sketch و نسخه های قبلی، Rotate Copies شکل ترکیبی از کپی های شما ایجاد می کند (مانند عملیات بولی). برای تبدیل آن به لایه های جداگانه، از Layer > Combine > Break Apart استفاده کنید.
منبع: sketch.com
