اضافه کردن اشکال

یکی از رایج ترین کارهایی که در طراحی رابط کاربری پیش می آید، اضافه کردن 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

نوشته آموزش سریع و کاربردی کار با ابزار shape در محیط رابط کاربری Sketch اولین بار در ممتاز دیزاین. پدیدار شد.

نحوه رسم شکل با ابزار pen در ایلوستریتور

رسم خطوط راست و مستقیم

1. ابزار Pen را انتخاب کرده و روی صفحه یک بار کلیک کنید تا نقطه لنگر (anchor point) اول ایجاد شود.
2. ماوس خود را به موقعیت بعدی ببرید و دوباره کلیک کنید تا نقطه دوم ایجاد شود. حالا دو نقطه لنگر بهم متصل می شوند.
3. برای ایجاد یک شکل W همانطور که در تصویر زیر مشاهده می کنید، این کار را ادامه دهید.
4. برای ترسیم خط جدید، روی ابزار انتخاب (نماد پیکان سیاه) کلیک کنید و دوباره ابزار قلم را برگردانید.

بستن یک مسیر

برای بستن یک مسیر، روی نقطه شروع کلیک کنید تا شکل بسته شود.

رسم خطوط منحنی با (Curved Line)

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

تغییر مسیر path

برای ایجاد یک نقطه لنگر (anchor point) صاف، ابزار pen را انتخاب کرده و روی صفحه کلیک کنید و بکشید. بدون اینکه دستتان را از روی کلیک ماوس رها کنید، ماوس را نگه دارید و کلید Alt را فشار داده و دستگیره ها را بکشید تا جهت مسیر یا (path) تغییر کند.

ترسیم یک مسیر دایره ای

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

افزودن نقاط Anchor Points

ابزار pen را انتخاب کنید و به سمت مسیری که می خواهید نقطه لنگر جدیدی به آن اضافه کنید، بروید. یک علامت (+) در کنار pen ظاهر می شود، روی مسیر کلیک کنید تا یک نقطه لنگر جدید ایجاد کنید.

حذف نقاط Anchor Points

برای حذف نقطه دلخواه خود، Pen Tool را به سمت نقطه ای که می خواهید آن را حذف کنید، ببرید. یک علامت منفی (-) در کنار pen ظاهر می شود. برای حذف آن روی نقطه لنگر کلیک کنید.

تبدیل نقاط Anchor Points

برای تبدیل نقطه لنگر دارای انحنا به یک نقطه لنگر تیز، ابزار Pen Tool را نزدیک نقطه لنگر ببرید و همزمان Alt را نگه دارید، مشاهده می کنید که ابزار pen به شکل یک فلش یا پیکان تغییر می کند. حالا روی آن کلیک کنید تا نقطه صاف به نقطه تیز تبدیل شود.

می توانید روی نقطه لنگر کلیک کرده و بکشید تا دوباره به نقطه صاف تبدیل شود.

حرکت دادن نقاط لنگر

برای انجام این کار ابزار Direct Selection را انتخاب کرده و روی نقطه ای که می خواهید آن را حرکت دهید، کلیک کنید. همچنین برای تغییر موقعیت آن کلیک کنید و آن را به مکان مورد نظر بکشید.

تغییر مسیرهای لنگر

با استفاده از Pen Tool می توانید جهت نقاط لنگر را به سرعت تغییر دهید. Ctrl را نگه دارید تا ابزار Pen Tool به Direction Selection Tool تغییر کند. نقطه لنگر مورد نظر را که می خواهید ویرایش کنید، انتخاب کنید. handle یا دستگیره لنگر ظاهر می شود.

اکنون Ctrl را رها کرده و کلید Alt را نگه دارید تا به Convert Anchor Tool تغییر کند. برای تغییر جهت، روی دستگیره ها کلیک کنید و آن ها را بکشید.

ترسیم یک کلید قدیمی

پس از یادگیری نحوه کار با ابزار pen ایلوستریتور ، ما آنچه را که یاد گرفته اید برای ایجاد این شکل کلید قدیمی استفاده می کنیم. برای ایجاد زاویه های راست و دقیق، Shift را قبل از اضافه کردن نقطه لنگر جدید نگه دارید تا زاویه ها روی 90 درجه ثابت شوند.

تصویر نهایی

این تصویر، تصویر نهایی است.

نکاتی برای استفاده از ابزار Pen

• از نقاط لنگر کمتری برای رسم شکل خود استفاده کنید.
• نقاط لنگر را در جایی که جهت خط یا منحنی را تغییر می دهید اضافه کنید.
• از میانبر هایی مانند Alt و Ctrl استفاده کنید تا سریعاً یک ابزار را به ابزار دیگر تبدیل کنید و بتوانید مسیرها را ویرایش کنید.
• زمانی که کلید Shift را نگه داشته و نقطه لنگر بعدی را اضافه می کنید، این نقطه به طور خودکار با زاویه های 45 درجه اضافه می شود.

آموزش بیشتر ابزار Pen Tool

برای یاد گیری این ابزار باید تمرینات زیادی با آن انجام دهید. این تمرینات را در کامپیوتر خود ذخیره کرده و با رفتن به زبانه File و Place آن را در ایلوستریتور قرار دهید.

تصویر را انتخاب کرده و مطمئن شوید گزینه الگو (Template) فعال است. اکنون تصویر کمرنگ شده و به عنوان الگو قرار می گیرد. سعی کنید زود نا امید نشوید و آن قدر تمرین کنید تا به خوبی کار با ابزار pen ایلوستریتور را یاد بگیرید.

نمونه ای از اشکال ایجاد شده با pen tool

منبع: vectordiary

نوشته آموزش کار با ابزار pen در ایلوستریتور و هر آنچه که درباره آن باید بدانید! اولین بار در ممتاز دیزاین. پدیدار شد.