نوشته آموزش سریع و کاربردی کار با ابزار shape در محیط رابط کاربری Sketch اولین بار در ممتاز دیزاین. پدیدار شد.
]]>یکی از رایج ترین کارهایی که در طراحی رابط کاربری پیش می آید، اضافه کردن Shape جدید به محیط sketch شماست.
برای افزودن یک Shape جدید، روی دکمه Insert در نوار ابزار Sketch یا درج آیتم در نوار منو کلیک کنید، گزینه Shape را انتخاب کنید و سپس نوع شکلی را که می خواهید به رابط کاربری خود در Sketch اضافه کنید انتخاب کنید. همچنین می توانید از میانبر های صفحه کلید زیر برای اضافه کردن برخی از اشکال از پیش ساخته استفاده کنید:

برای افزودن شکل خود، روی هر جایی از بوم یا تابلوی هنری خود کلیک کرده و بکشید. در حین کشیدن، ابعاد شکل را در کنار مکان نما خواهید دید. ⇧ را در حالی که روی shape کلیک کرده اید و آن را می کشید نگه دارید تا ارتفاع و عرض شکل شما برابر شود.
هنگام کلیک کردن، ⌥ را نگه دارید تا شکل خود را از مرکز آن بکشید (به جای بالا سمت چپ).
هنگامی که روی شکل کلیک می کنید، نوار Space را نگه دارید و بکشید تا مبدا شکل خود را بر خلاف اندازه آن تغییر دهید (اگر از جای اشتباه شروع کرده اید برای شما مفید است).
کلید P را فشار دهید یا ابزار Pencil را از منوی Insert انتخاب کنید تا ابزار Pencil فعال شود. از آنجا می توانید هر شکلی را که دوست دارید بکشید. وقتی طراحی shape خود را در رابط کاربری مورد نظر تمام کردید، برنامه Sketch منحنی ها را صاف می کند و مسیری که ایجاد کرده اید را ساده می کند.
میتوانید با کپی و چسباندن کد SVG در هر جایی از بوم رابط کاربری Sketch خود، لایههای شکل جدیدی ایجاد کنید.
هر شکلی که به طراحی ما اضافه می شود نیاز به ادیت کردن و سفارشی سازی ارد که در ادامه به بررسی کامل آن خواهیم پرداخت.
هنگامی که یک شکل را انتخاب می کنید، گزینه هایی برای ویرایش آن شکل در Inspector خواهید دید. برای مثال، ابزار ستاره به شما امکان می دهد شعاع و تعداد نقاط آن را تنظیم کنید.
روی یک مستطیل گرد کلیک کنید تا شعاع گوشه های آن در Inspector تنظیم شود.
شما می توانید بین گوشه های گرد و صاف انتخاب کنید و نحوه ترسیم گوشه های لایه را تغییر دهید. گوشه های صاف دارای تداوم انحنا هستند و به شما امکان می دهند “squircles” ایجاد کنید، شکلی که اپل در رابط های خود استفاده می کند.
نکته: وقتی در حالت ویرایش برداری هستید، میتوانید یک نقطه گوشه جداگانه را برای تنظیم شعاع یک گوشه انتخاب کنید.
با استفاده از دو دکمه در Inspector می توانید اشکال را به صورت افقی برگردانید. این دکمهها انتخاب میشوند (بنابراین میتوانید دوباره کلیک کنید تا تغییر را معکوس کنید) مگر اینکه شکل را صاف کنید و تغییرات را با استفاده از Layer > Combine > Flatten انجام دهید.
چند راه برای چرخاندن Shape های رابط کاربری شما در برنامه Sketch وجود دارد. می توانید مقداری را بر حسب درجه در Inspector وارد کنید. این می تواند یک مقدار مثبت یا منفی برای چرخش به ترتیب در جهت عقربه های ساعت یا خلاف جهت عقربه های ساعت باشد.
یا می توانید شکل خود را انتخاب کنید و روی دکمه Rotate در نوار ابزار کلیک کنید. سپس روی هر جایی خارج از شکل خود کلیک کرده و بکشید تا آن را بچرخانید. برای تغییر محوری که شکل شما بر روی آن میچرخد، کافی است روی نقطهای که میخواهید به دور آن بچرخید، بر روی آن کلیک کنید و آن را در مرکز آن بکشید. برای تنظیم مجدد این، به سادگی شکل خود را دوباره انتخاب کنید.
در نهایت، با نگه داشتن ⌘ و کشیدن یکی از دستگیرههای انتخاب آن، میتوانید به سرعت هر شکلی را که انتخاب کردهاید بچرخانید.
نگه داشتن ⇧ هنگامی که یک شکل را می چرخانید، این کار را با افزایش 15 درجه انجام می دهد. شما می توانید این تغییرات را انجام دهید و با صاف کردن شکل (Layer > Combine > Flatten) مقدار چرخش را به 0 درجه تنظیم کنید.
برای ویرایش یک شکل در حالت ویرایش برداری، روی آن دوبار کلیک کنید یا آن را انتخاب کنید و کلید Enter را فشار دهید. وقتی وارد حالت ویرایش برداری میشوید، نقاط دایرهای را میبینید که توسط مسیرهایی به هم متصل شدهاند. روی هر یک از نقاط دایره ای کلیک کنید و آنها را بکشید تا شکل یک لایه تغییر کند.
برای افزودن یک نقطه جدید، ماوس را روی مسیری بین دو نقطه ببرید و برای درج نقطه جدید کلیک کنید. برای حذف یک نقطه، آن را انتخاب کرده و کلید Backspace را فشار دهید.
بسته به نوع نقطه ای که آن ها را به هم متصل می کند، مسیرهای بین نقاط مختلف شکل شما می تواند خطوط مستقیم یا منحنی باشد. روی نقطه ای که مسیرهای مستقیم را به هم متصل می کند دوبار کلیک کنید تا آن را به یک مسیر منحنی تغییر دهید.
هنگامی که یک نقطه را برای ایجاد یک مسیر منحنی تغییر می دهید، می توانید از دو نقطه کنترل دسته که به نظر می رسد برای ویرایش خود منحنی استفاده کنید.
صاف کردن شکل خود (با انتخاب ابزار Layer > Combine > Flatten Flatten) نقاطی را در هر انتهای منحنی ایجاد می کند.
برای استفاده از ابزار Transform، یک یا چند شکل را انتخاب کنید و به Layer > Transform > Transform بروید. یا می توانید از میانبر صفحه کلید ⌘ ⇧ T استفاده کنید. شما همچنین می توانید ابزار Transform را از طریق View > Customize Toolbar به نوار ابزار خود اضافه کنید.
ابزار Transform نقاطی را به هر گوشه از Shape شما و همچنین نقاط بین هر گوشه رابط کاربری شما در برنامه Sketch اضافه می کند. روی یک نقطه کلیک کنید و آن را بکشید تا Shape شما تغییر شکل دهد و کج شود.
اگر روی نقطه ای بین دو گوشه کلیک کرده و بکشید، هر دو گوشه را همزمان جابه جا می کنید.
هنگامی که روی یک نقطه گوشه کلیک کرده و بکشید، گوشه مقابل به طور همزمان در جهت مخالف حرکت می کند. برای کنترل فقط یک گوشه، ⌘ را نگه دارید.
می توانید از ابزار Scissor برای جدا کردن مسیرها از اشکال استفاده کنید. برای انجام این کار، شکل مورد نظر برای ویرایش را انتخاب کنید، ابزار را از طریق Layer > Path > Scissors فعال کنید (همچنین می توانید آن را از طریق View > Customize Toolbar… به نوار ابزار خود اضافه کنید) و روی هر یک از مسیرهایی که شکل شما را تشکیل می دهند کلیک کنید. آن ها را حذف کنید.
وقتی کارتان تمام شد، خارج از شکل کلیک کنید یا Enter یا Esc را فشار دهید.
ابزار 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 اولین بار در ممتاز دیزاین. پدیدار شد.
]]>نوشته بهترین پلاگین های جی کوئری برای نمایش کتاب و مجله اولین بار در ممتاز دیزاین. پدیدار شد.
]]>فلیپ بوک های جاوا اسکریپت محتوای شما را در قالب فلیپ بوک دیجیتال با استفاده از جلوه های ورق زدن صفحه، بزرگنمایی و پشتیبانی از انواع محتوا به نمایش می گذارند. CodeCanyon بازاری برای انواع کدها، از جمله ویجت های جاوا اسکریپت ممتاز و پلاگین های جی کوئری است. این بهترین مکان برای یافتن پلاگین های flipbook جی کوئری برای نمایش کتاب است.
پرفروش ترین افزونه جی کوئری WowBook فایل های HTML، تصویر یا PDF شما را به فلیپ بوک هایب با طراحی ریسپانسیو تبدیل می کند. استفاده از این افزونه jQuery flipbook هم از نظر طراحی و هم برای کاربران نهایی آسان است. بیایید به برخی از ویژگی های اصلی آن نگاه کنیم.

افزونه WowBook جی کوئری برای نمایش کتاب سه قالب آماده برای استفاده دارد، بنابراین شما می توانید فلیپ بوک خود را در چند ثانیه ایجاد کنید. از گزینه های طراحی برای سفارشی کردن بیشتر نوار ابزار ریسپانسیو، فهرست مطالب، تصاویر کوچک، ردیف های محتوا به صورت ریسپانسیو و شماره صفحه با HTML و CSS استفاده کنید. تصمیم بگیرید که چگونه بینندگان با فلیپ بوک شما با گزینه های دیگری مانند حالت تک صفحه ای، نمایش اسلاید، لایت باکس و حالت کتاب بدون جلد/غیرقابل بسته شدن ارتباط برقرار کنند.
دانلود WowBook با پشتیبانی کامل از فرمت PDF ارائه می شود، بنابراین این افزونه می تواند لینک های داخلی و خارجی، فهرست ها و متن های قابل انتخاب را مدیریت کند. با پشتیبانی داخلی و صفحه کلید قابل تنظیم و ناوبری با استفاده از اسکرول ماوس، فلیپ بوک شما در پلتفرم های موبایل و دسکتاپ کارایی خواهد داشت.
این افزونه کتاب جی کوئری با تمام ویژگیهایی که کاربران نهایی در یک ابزار ریسپانسیو برای نمایش انتظار دارند ارائه میشود، بنابراین آن ها به طور مستقیم درک میکنند که چگونه با فلیپ بوک شما تعامل داشته باشند. گوشههای صفحه در حالت hover خم میشوند تا کاربران را وادار به تعامل با سند شما کنند. پشتیبانی کامل از لمس، با قابلیت کوچک کردن و دوبار کلیک کردن برای بزرگنمایی، همراه با تغییر اندازه داخلی برای ابعاد مختلف صفحه، لذت بردن از فلیپ بوک را برای کاربران آسان می کند.
از نظر جزئیات طراحی، این پلاگین flipbook جی کوئری به شما امکان می دهد بین دو جلوه واقعی ورق زدن صفحه یکی را انتخاب کنید، بنابراین کاربران شما، کتاب جلد سخت یا جلوه های ورق زدن صفحه را تجربه خواهند کرد. در مرورگر هایی که پشتیبانی صوتی دارند، این افزونه شامل یک جلوه صوتی صفحهگردان نیز میشود. در نهایت، افزونه WowBook jQuery flipbook به طور کامل در تمام مرورگرهای اصلی پشتیبانی می شود و نیازی به فلش ندارد، بنابراین می توانید مطمئن باشید که flipbook شما به درستی برای بینندگان نمایش داده می شود.
WowBook دارای ویژگی های داخلی برای تغییر اندازه کتاب برای اندازه های مختلف صفحه نمایش است. همچنین دارای پشتیبانی لمسی است، جایی که کاربران میتوانند برای بزرگنمایی دوبار کلیک کنند. نوار ابزار responsive نیز با اندازه صفحه سازگار است و از بارگذاری تنبل پشتیبانی می کند.
اگر برای محتوای خود به نمایش اسلاید نیاز دارید، WowBook شما را تحت پوشش قرار داده است. می توانید کتاب خود را به یک حالت نمایش اسلاید تبدیل کنید و فاصله اسلایدها را پیکربندی کنید. همچنین از چرخش صفحه از راست به چپ پشتیبانی می کند.

Real3D بهترین افزونه جی کوئری برای نمایش کتاب است و همچننی برای ایجاد صفحات تعاملی بسیار عالی است. ویژگی های اصلی این افزونه عبارتند از:
Real3D فایل های PDF و تصاویر را به صورت سه بعدی فوق العاده نمایش می دهد. همچنین از جستجوی متن، امکان انتخاب عناصر در داخل PDF و دانلود PDF پشتیبانی می کند. میتوانید هر محتوای HTML را اضافه کنید و صفحات تعاملی را از پیوندها، ویدیوها، پخشکنندههای موسیقی و موارد دیگر ایجاد کنید.
این افزونه به شما این امکان را می دهد که هر جنبه ای از فلیپ بوک را متناسب با محتوای خود سفارشی کنید. از سرعت صفحه گرفته تا صدای چرخش، زاویه دوربین، نورها و سطوح زوم، شما فقط با تخیل خود محدود هستید. رابط کاربری این افزونه نیز قابل تنظیم است و به شما اجازه می دهد تا یک flipbook بسازید که کاملاً با هر رابطی مطابقت دارد. Real 3D با سه پوسته از پیش تعریف شده و چهار طرح رابط کاربری از پیش تعریف شده ارائه می شود. برخی از جنبه هایی که می توانید سفارشی کنید عبارتند از آیتم های منو، دکمه ها، حاشیه ها و سایه ها.
پلاگین Real3D فلیپ بوک های ریسپانسیو را ایجاد می کند که می تواند برای هر صفحه یا پست کاملاً مناسب باشد. همچنین بر روی هر دستگاهی کار می کند، بنابراین کاربران تلفن همراه شما تجربه مشابهی با کاربران دسکتاپ دارند.
مطالعه بیشتر

پلاگین Diamond FlipBook جی کوئری برای نمایش کتاب یک برنده همه جانبه است، از سبک بودن و سهولت استفاده گرفته تا انعطاف پذیری نهایی در نمایشگر های مختلف را ارائه می دهد. انیمیشن های جذاب و واقع گرایانه آن بر اساس کتابخانه Turn.js ساخته شده اند. افزونه Diamond FlipBook روی هر دو طرحبندی واکنشگرا و غیر ریسپانسیو کار میکند. با استفاده از این افزونه، می توانید از پهنای فلیپ بوک استفاده کنید که به بهترین شکل با سایت شما مطابقت داشته باشد، چه طرح بندی شما واکنش گرا باشد یا نه.
همچنین، این افزونه به شما امکان می دهد اسناد با هر طول صفحه ای را آپلود کنید، بنابراین هنگام ساخت فلیپ بوک خود محدودیتی ندارید. گزینه های نمایش مانند نوار ابزار، ابزارهای زوم و پیوندهای عمیق همگی قابل تنظیم هستند، بنابراین شما کنترل کاملی بر نتیجه نهایی دارید.
با بارگذاری تنبل و بدون نیاز به فلش، این پلاگین flipbook جی کوئری برای نمایش کتاب سریع ترین و مطمئن ترین عملکرد را برای بینندگان وب سایت شما فراهم می کند. در صورتی که برای دستیابی به مخاطبان هدف خود به آن نیاز داشته باشید، همراه با پشتیبانی YouTube، عملکرد راست به چپ نیز در آن در دسترس است. به روز رسانی رایگان به این معنی است که فلیپ بوک شما عملکرد زیبایی برای شما ارائه می دهد که قدیمی نمی شود و در زمان و تلاش شما صرفه جویی می کند.

افزونه Newspaper Flipbook جی کوئری به دلیل پشتیبانی از برچسب ها در صفحات توضیحات متمایز است. پشتیبانی تمام تگهای عنوان از h1 تا h6، پاراگراف، پیوند، لیستهای مرتب و نامرتب و عناصر img، از جمله hover به راست و چپ برای تصاویر را شامل می شود.
فلیپ بوک که به راحتی در تمام صفحه های دستگاه و مرورگر های مدرن کار می کند، می تواند صفحات PDF را بدون نیاز به تبدیل آن ها به فایل JPEG بخواند. برای این کار از یک کتابخانه PDf.js استفاده می کند. به لطف بارگذاری تنبل، صفحات فلیپ بوک سریع بارگذاری می شوند.
یکی دیگر از ویژگیهای جالب که قابل ذکر است، پشتیبانی روزنامههای flipbook برای زبانهای RTL مانند فارسی و عربی است که به آن اجازه میدهد صفحات را به زبانهای عربی، عبری و سایر زبانها بخواند. این فلیپ بوک جی کوئری با قالب وردپرس آوادا نیز سازگار است.
بهترین ویژگیها در فلیپبوکهای ممتاز CodeCanyon یافت میشوند، اما اگر بودجه کمی دارید، گزینههای رایگان عالی نیز وجود دارد. بیایید به چند پلاگین رایگان جی کوئری برای نمایش کتاب نگاهی بیاندازیم که به شما امکان نمایش محتوای تعاملی غنی را می دهد.

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

Turn.js یک کتابخانه جاوا اسکریپت با ظاهری مدرن است که به کاربر اجازه میدهد تا فلیپبوکهای PDF ریسپانسیو ایجاد کنند. همچنین با دستگاه های iOS مانند iPad و iPhone سازگار است. سایر ویژگی ها عبارتند از:
Book Block یک پلاگین منبع باز jQuery است که به شما امکان می دهد با ورق زدن صفحات، کتابچه ای برای پیمایش در آیتم های آن ایجاد کنید. دارای ویژگی های زیادی است تا اطمینان حاصل شود که بازدیدکنندگان شما هنگام مرور محتوای شما تجربه خوبی دارند. ویژگی های آن عبارتند از:
منبع: code.tutsplus.com
نوشته بهترین پلاگین های جی کوئری برای نمایش کتاب و مجله اولین بار در ممتاز دیزاین. پدیدار شد.
]]>نوشته معرفی جعبه ابزار نرم افزار طراحی رابط کاربری Sketch اولین بار در ممتاز دیزاین. پدیدار شد.
]]>
شما همچنین می توانید با فشار دادن ⌘ ⌥ T یا با انتخاب View > Show/Hide Toolbar در نوار منو، بین پنهان کردن و نمایش جعبه ابزار Sketch جابه جا شوید. استفاده از جعبه ابزار در هر نرم افزار طراحی بسیار ضروری است و باعث راحتی کار در محیط آن نرم افزار می شود. در واقع نرم افزار های طراحی رابط کاربری برای سرعت بخشیدن به کار طراحان، جعبه ابزار ها را در بهینه ترین حالت ممکن ارائه می دهند.
حال که آموختید هر عنصر در جعبه ابزار Sketch چه ویژگی هایی دارد و قابلیت های آن چگونه است، بیایید به بررسی نوار ابزار Inspector که مختص نظارت بر عناصر قابل استفاده در بوم رابط کاربری شماست، بپردازیم.
در نوار Inspector، تنظیمات هر لایه ای را که انتخاب کرده اید، یا کنترل های ابزاری که استفاده می کنید را پیدا خواهید کرد. Inspector این کنترل ها و تنظیمات را بر اساس آنچه انتخاب کرده اید یا انجام می دهید، پنهان کرده و یا نشان می دهد. تقریبا هر مقدار دهی که بخواهید را می توانید به عنصر مورد نظر خود در نوار ابزار inspector بدهید و طراحی خود را انجام دهید.

امیدواریم این آموزش برای شما مفید واقع شود. اگر طراحی رابط کاربری را شروع نکرده اید از همین امروز اصول طراحی را یاد بگیرید و شروع به خلق UI های فوق العاده کنید و روز به روز به تجربه های طراحی خود اضافه کنید.
منبع: sketch.com
نوشته معرفی جعبه ابزار نرم افزار طراحی رابط کاربری Sketch اولین بار در ممتاز دیزاین. پدیدار شد.
]]>نوشته آموزش کار با قابلیت های بوم در نرم افزار Sketch برای طراحی رابط کاربری اولین بار در ممتاز دیزاین. پدیدار شد.
]]>بوم (Canvas) جایی است که شما طرح های خود را ایجاد می کنید. بوم ها در طراحی رابط کاربری بی نهایت انعطاف پذیر هستند، بنابراین می توانید هر طور که دوست دارید المان ها را تنظیم کنید و مستقیماً روی خود Canvas کار کنید بدون اینکه نگران کمبود فضا در Sketch باشید. اگر ترجیح می دهید در یک قاب ثابت کار کنید، می توانید Artboards را به بوم خود اضافه کنید.
میتوانید دکمه فاصله را نگه دارید و برای حرکت در اطراف بوم کلیک کنید و بکشید، یا اگر هیچ لایهای را انتخاب نکردهاید، از کلید های جهتنما استفاده کنید. چند راه برای بزرگنمایی و کوچکنمایی بوم در طراحی رابط کاربری در نرم افزار Sketch وجود دارد:

همچنین چند میانبر زوم در این نرم افزار وجود دارد:
در طراحی رابط کاربری در نرم افزار Sketch به طور پیش فرض، بوم را در حالت برداری مشاهده خواهید کرد. رزولوشن آن مستقل است و می توانید برای کار در هر سطحی از جزئیات، بی نهایت زوم کنید. این اپلیکیشن مخصوص مک بوک لایهها را در نقاطی اندازهگیری میکند که در آن یک نقطه برابر با یک پیکسل در بوم است و زمانی که شما فایل را Export میکنید، میتوانید المان های به کار برده شده را با وضوحهای مختلف مقیاس کنید.
اگر روی طراحی رابط کاربری کار میکنید که در آن دیدن تک تک پیکسلها در بوم Sketch مهم است، به مسیر View > Canvas > Show Pixels on Zoom بروید یا ⌃P را فشار دهید تا Pixel Zoom فعال شود و وقتی 100% بزرگنمایی میکنید، پیکسلهای جداگانه را مشاهده می کنید.

به مسیر View > Canvas Canvas > Show Pixel Grid on Zoom بروید، یا ⌃X را فشار دهید تا هر لبه لایههای خود را که با Pixel Grid همسو نمیشوند، پس از بزرگنمایی 600 درصدی، آن نقاط را پیدا کنید.

بوم Sketch خط کش ها را به طور پیش فرض برای طراحی رابط کاربری پنهان می کند، اما می توانید با انتخاب View > Canvas > Show Rulers یا فشار دادن ⌃R، آن ها را نشان دهید. شما می توانید روی خط کش های خود کلیک کرده و بکشید تا مبدا صفر آن ها را در هر جایی که دوست دارید روی بوم تنظیم کنید. برای قفل کردن آن ها در جای خود، روی آیکون قفل در گوشه سمت چپ کلیک کنید. برای بازنشانی مبدا خطکش ها، View > Canvas > Reset Ruler Origin را انتخاب کنید.
برای ایجاد راهنما و توضیح طراحی رابط کاربری خود در بوم Sketch می توانید روی هر جایی از خط کش کلیک کنید. راهنماها زمانی قابل مشاهده خواهند بود که خطکشهای شما در صفحه باشند و اگر لایهای را روی بوم خود حرکت دهید، به نزدیکترین راهنما میچسبد.
با کلیک کردن و کشیدن یک راهنما در داخل یک خط کش می توانید راهنما را حرکت دهید. برای حذف کامل آن، آن را به سمت راست به سمت لیست لایه یا Inspector بکشید تا مکان نما تغییر کند. خواهید دید که راهنما ناپدید می شود.
برای حذف همه راهنماهای خود با هم، روی یکی از خط کش ها Control را فشار داده و کلیک کنید و به ترتیب Remove All Vertical Guides یا Remove All Horizontal Guides را انتخاب کنید.
برنامه طراحی رابط کاربری Sketch از دو نوع شبکه در بوم خود پشتیبانی می کند. یک شبکه منظم (مربع) و یک شبکه طرح بندی یا لی اوت. در صورت نیاز می توانید هر دو را همزمان مشاهده کنید.
مطالعه بیشتر
برای تنظیم یک شبکه مربعی، مسیر View > Canvas > Show Grid را انتخاب کنید یا ⌃G را فشار دهید. برای تغییر تنظیمات آن (اندازه سلولها، تعداد دفعات ظاهر شدن خطوط ضخیمتر و رنگ خطوط)، View > Canvas > Grid Settings را انتخاب کنید یا ⌃⌘G را فشار دهید.
برای راهاندازی یک شبکه طرحبندی، مسیر View > Canvas > Layout Settings را انتخاب کنید یا ⌃⌘L را فشار دهید و از گزینههای ظاهر شده برای انتخاب تعداد ستونها و ردیفها، عرض، عرض حفره ها و رنگ مناسب استفاده کنید.
شما فقط میتوانید گرید ها را در Artboards یا در Canvas اعمال کنید، اگر هیچ Artboard روی آن وجود نداشته باشد. میتوانید گزینههای طرحبندی را برای چندین Artboard به طور همزمان ویرایش کنید. هنگامی که یک گرید لی اوت مانند را تنظیم میکنید، لایهها روی آن میچسبند و راهنمای هوشمند برنامه Mac را نادیده میگیرند.
همانطور که لایهها و آیکون ها را روی بوم رابط کاربری خود جابهجا میکنید یا درج میکنید، برنامه Sketch بهطور خودکار اندازهگیریها را در برابر لایههای مجاور به شما نشان میدهد، و همچنین راهنما های هوشمندی را که به شما کمک میکنند به مرکز یا لبههای لایه نزدیک بچسبید، در اختیارتان قرار می دهد.
اگر دو یا چند لایه در کنار یکدیگر دارید، و یکی دیگر را به آن ها نزدیک می کنید، Sketch فاصله آن ها را هایلایت می کند و به طور خودکار آن لایه را متوازن می کند تا همه آن ها به طور مساوی توزیع شوند.
وقتی اندازه یک لایه را تغییر میدهید، اگر لایههای مشابهی در این نزدیکی وجود داشته باشد، Sketch به شما نشان میدهد که آیا آن ها عرض یا ارتفاع مشابهی دارند یا خیر. این همچنین زمانی کار میکند که اندازه لایهای را تغییر میدهید که روی لایه دیگری همپوشانی دارد.
در نهایت، وقتی لایههای متنی را وارد یا جابهجا میکنید، به ارتفاع یا عرض لایههای مجاور میچسبند. با تنظیم ارتفاع یک لایه متن، کادر محدود کننده ای که ایجاد شده است به آخرین خط متن میچسبد.
شما می توانید هر تعداد صفحاتی را که دوست دارید در فایل Sketch خود استفاده کنید. آن ها برای سازماندهی کار شما مفید هستند، به عنوان مثال کاربرد آن برای ایجاد یک صفحه جدید برای هر بخش از تحویل پروژه رابط کاربری یا تقسیم طراحی های پیچیده به چندین صفحه با اختصاص دادن ویژگی های یک صفحه به هر منطقه و موارد دیگر کاربرد دارد. استفاده از چندین صفحه همچنین می تواند به بهبود عملکرد برنامه Sketch با اسناد طراحی UI پیچیده کمک کند.
برای ایجاد یک صفحه جدید، روی دکمه افزودن (به شکل مثبت) در بالای لیست لایه کلیک کنید و به صفحه جدید خود یک نام بدهید.
روی صفحه ای که می خواهید در لیست لایه ها پیمایش کنید، کلیک کنید تا به آن بروید یا Fn↑ یا Fn↓ را فشار دهید تا بین آن ها پرش کنید. همچنین میتوانید فهرست صفحات خود را با استفاده از chevron جمع کنید و به جای آن از یک منوی کشویی برای پیمایش بین آن ها استفاده کنید.
شما همچنین میتوانید صفحات را بکشید تا ترتیب آن ها را تغییر دهید، یا روی یک صفحه کلیک کنید تا آن را کپی یا حذف کنید. پس از ایجاد صفحات، می توانید آرت بورد ها یا لایه های موجود در لیست لایه ها را از یک صفحه به صفحه دیگر در پنل طراحی رابط کاربری صفحات بکشید.
استفاده از Artboard کاملاً اختیاری است، اما برای ایجاد قابهای ثابت روی بوم خود برای طراحی رابط کاربری در Sketch مفید است. اگر برای دستگاه یا اندازه صفحهنمایش خاصی طراحی میکنید این بخش بسیار مفید هستند.
برای ایجاد آرت بورد مسیر Insert > Artboard را از نوار ابزار یا نوار منو بالا انتخاب کنید، یا A را فشار دهید. میتوانید روی Canvas کلیک کرده و بکشید تا یک Artboard با اندازه سفارشی ایجاد کنید، یا یک آرت بورد از پیش تنظیم شده از Inspector انتخاب کنید.
برای تنظیم یا تغییر جهت Artboard، آن را در Canvas یا در Layer List انتخاب کنید، سپس نماد افقی یا نماد عمودی را در کنار ابعاد آن در Inspector انتخاب کنید. همچنین میتوانید هنگام انتخاب پیشتنظیم Artboard، جهتگیری را با استفاده از همان نمادها انتخاب کنید.

برای ذخیره یک Artboard با اندازه سفارشی به عنوان یک قالب از پیش تنظیم شده، روی دکمه Add در پایین Inspector کلیک کنید و نامی برای آن بگذارید. پس از ایجاد یک Artboard، میتوانید ⌘D را فشار دهید تا آن را کپی کنید.
در این آموزش برنامه طراحی رابط کاربری یا UI به نام Sketch راجع به قابلیت هایی که در بوم این برنامه قابل اجرا بود، صحبت کردیم. امیدواریم این آموزش برای شما مفید واقع شده باشد.
منبع: sketch.com
نوشته آموزش کار با قابلیت های بوم در نرم افزار Sketch برای طراحی رابط کاربری اولین بار در ممتاز دیزاین. پدیدار شد.
]]>نوشته معرفی کامل ابزار طراحی گرافیک Inkscape و مزایای آن اولین بار در ممتاز دیزاین. پدیدار شد.
]]>
Inkscape یک نرم افزار ترسیم برداری وکتور رایگان و قدرتمند برای ویندوز و مک است که به شما امکان می دهد تصاویر گرافیکی را به روشی مشابه Adobe Illustrator ایجاد کنید. Inkscape یکی از معدود نرم افزار های گرافیکی وکتور رایگان موجود است و یکی از قدیمی ترین و قوی ترین ابزارها است.
چگونه چنین برنامه قدرتمندی می تواند رایگان باشد؟ اولین انتشار آن 15 سال پیش بود و هنوز هم تا به امروز توسط هزاران کاربر متعهد در سراسر جهان در حال توسعه و به روز رسانی است. این ابزار کارآمد و قدرتمند است و به کاربران خود اجازه میدهد تا طراحی گرافیکی حرفهای و غیرقابل تشخیص از نرم افزار های گرافیکی گران قیمت مانند Adobe Illustrator ایجاد کنند.
شما فقط می توانید نرم افزار را دانلود کنید و همین الان شروع به ایجاد طراحی های خود کنید. می توانید آخرین نسخه Inkscape را به صورت رایگان در وب سایت رسمی: inkscape.org دانلود کنید. به دلایل زیادی، این برنامه گرافیکی برای طراحان مبتدی و مشتاق، بسیار ایده آل است.
طراحان حرفه ای در سراسر جهان از Inkscape برای پایین نگه داشتن هزینه ها و تولید طرح های با کیفیت بالا و حرفه ای استفاده می کنند. Inkscape نرم افزار طراحی گرافیکی است که من برای طراحان خودآموخته توصیه می کنم زیرا به آن ها اجازه می دهد تا اصول گرافیک برداری و طراحی را همین الان یاد بگیرند.

با ابزار Inkscape می توانید هر کاری را که معمولاً یک طراح گرافیک انجام می دهد انجام دهید. این امکان را به شما می دهد تا لوگو، آگهی، کارت ویزیت، وب سایت، امضا، سربرگ و غیره ایجاد کنید. شما حتی می توانید نقاشی های فوق العاده واقعی مانند تصویر زیر ایجاد کنید:
همچنین میتوانید از Inkscape برای کارهای خاصی که معمولاً با نرمافزار پیکسلی (مانند فتوشاپ) انجام میدهید، استفاده کنید، مانند برش تصاویر، اعمال فیلتر های اساسی، کوچک کردن تصاویر بزرگ یا اعمال متن روی عکسها.
من سالهاست که از ابزار Inkscape استفاده میکنم و چندین پروژه مختلف را در آن انجام دادهام. به عنوان مثال، کارت ویزیت، وب سایت، رابط نرم افزاری، لوگو، پوستر و بروشور ایجاد کرده ام. حتی از Inkscape در دوره های طراحی گرافیک در سطح دانشگاهی استفاده می کنند زیرا دانش آموزان در همان روز اول کلاس به آن دسترسی دارند و می توانند بلافاصله شروع به بازی با آن کنند.
این ابزار در واقع به آنها اجازه می دهد تا طراحی گرافیک را سریع تر یاد بگیرند. زیرا:
Inkscape آنقدر قدرتمند و پیچیده است که مهم نیست چقدر پیشرفته هستید، همیشه چیز های جدیدی برای یادگیری در آن وجود دارد.
ابزار Inkscape هم برای مبتدیان و هم برای طراحان پیشرفته عالی است. این ابزار مخصوصاً برای مبتدیان یک ابزار عالی است زیرا اصول نرم افزار گرافیک برداری را به شما آموزش می دهد. ابزار های زیادی دارد که میتوانید برای ایجاد نقشهها از آن ها استفاده کنید (مانند ابزار تبدیل، ابزار بیضی، ابزار مداد) که به شما امکان میدهد اشیاء برداری را به روش های پیچیده برای هر چیزی که نیاز دارید دستکاری کنید.
با Inkscape، مردم می توانند تصاویری باشکوه را ایجاد کنند که بسیار واقعی و حرفه ای هستند.

Inkscape به شما اجازه می دهد تا اصول اولیه نرم افزار گرافیک برداری را بیاموزید. ابتدا باید اصول اولیه برنامه را بیاموزید تا به آن و نحوه عملکرد گرافیک های برداری پی ببرید. سپس، شروع به تست کردن تمام ابزار های موجود در پنل سمت چپ کنید. به عنوان مثال، می توانید از ابزار مربع برای ساخت اشکال چهار گوش استفاده کنید یا می توانید از ابزار دایره برای ایجاد اشکال دایره ای و بیضی استفاده کنید.
پس از ایجاد برخی اشکال، از ابزار transform برای دستکاری این اشیا استفاده کنید و قدرت گرافیک برداری را احساس کنید. با نوشتن نام خود و استفاده از برخی افکت ها، مانند تغییر رنگ یا تغییر اندازه آن، حتی ممکن است متن را از چپ به راست کج کنید، پس شروع کنید.
همانطور که به یادگیری ادامه می دهید، باید حول پروژه های مختلف متمرکز شوید که موتوری برای تجربه و رشد شما در طراحی گرافیک خواهند بود. در واقع پروژه ها کلید یادگیری طراحی گرافیک هستند. ممکن است بعداً بخواهید یک لوگو برای وب سایت یا کانال YouTube دوست خود ایجاد کنید.
این ها فرصت های خوبی برای یادگیری نرم افزار های گرافیکی و طراحی هستند. این به نوبه خود دانش، مهارت و اعتماد به نفس شما را افزایش می دهد. این قسمت مهم است:
همانطور که پروژه های خود را به جلو می روید، سوالاتی خواهید داشت که به طور طبیعی از این فرآیند ناشی می شود. آن سوالات را در گوگل جستجو کنید و پاسخ ها و آموزش هایی را خواهید یافت که به یادگیری و مهارت های شما کمک می کند. هرچه بتوانید مشکلات بیشتری را حل کنید، بیشتر یاد خواهید گرفت.
نرم افزار های گرافیک برداری مانند Inkscape و Illustrator به شما این امکان را می دهند که نقاشی های دیجیتالی ایجاد کنید که می توانند از طرح های بسیار ساده به پیچیده تبدیل شوند و می توانند بسیار واقعی به نظر برسند. شما با استفاده از خطوط (strokes)، شکلها (دایرهها، مستطیلها، مارپیچها، چندضلعیها)، متن و رنگ، گرافیک برداری ایجاد میکنید.
گرافیک برداری به شما امکان می دهد آن عناصر را تبریل به چیز دیگری کنید یا آن ها را دستکاری کنید. در اصل، تقریباً هر چیزی را که میتوانید با دست بکشید، میتوانید با نرم افزار گرافیک برداری نیز بکشید. در قلب گرافیک برداری تصاویر SVG نهفته است که مخفف Scalable Vector Graphics است.
تصاویر SVG را می توان جستجو، فهرست بندی، اسکریپت و فشرده سازی کرد. تصاویر SVG را می توان با هر ویرایشگر متنی و همچنین با نرم افزار طراحی ایجاد و ویرایش کرد. همه مرورگر های وب مدرن – از جمله موزیلا فایرفاکس، اینترنت اکسپلورر، گوگل کروم، اپرا، سافاری و مایکروسافت اج- از رندر SVG پشتیبانی می کنند.
ویکی پدیا
این یعنی چه؟ این بدان معناست که فایل های Inkscape استاندارد هستند و با اکثر مرورگر های وب قابل خواندن و ویرایش با اکثر نرم افزار های برداری از جمله Adobe Illustrator هستند.
خوب، یک دلیل واضح برای استفاده از Inkscape رایگان بودن آن است. با این حال، این تنها دلیل نیست. ابزار Inkscape یک برنامه گرافیکی برداری گسترده و بالغ است که امکان ایجاد طرح های حرفه ای را فراهم می کند. نسخه های زیادی را در خود دارد و بیش از 15 سال است که وجود دارد. همچنین، بسیار قدرتمند است و به شما اجازه می دهد تا به همان اندازه که در نرم افزار های طراحی می کنید، کار های زیادی انجام دهید.
در ادامه یک دلیل عالی دیگر برای استفاده از ابزار Inkscape وجود دارد:
Inkscape یک جامعه کاربر اختصاصی و پرشور در سراسر جهان دارد. این انجمن هزاران منبع و آموزش با کیفیت بالا تولید می کند که می توانید آزادانه از آن ها برای یادگیری طراحی گرافیک برداری استفاده کنید. علاوه بر این، منابع آنلاین بیشماری بدون هیچ هزینهای در دسترس شما هستند، راهنماها، آموزشها و دورههای رایگان که نحوه استفاده از Inkscape را از مبتدی تا پیشرفته به شما آموزش میدهند.

قطعا می توانید از Inkscape برای طراحی حرفه ای استفاده کنید. در واقع، بسیاری از طراحان حرفهای Inkscape را ترجیح میدهند زیرا به آن ها کمک میکند هزینه های تولید را پایین نگه دارند و در عین حال یک برنامه ویرایش برداری در سطح جهانی را دریافت کنند.
همه نرمافزار های گرافیک برداری به روشهای مشابهی عمل میکنند زیرا از یک فلسفه مشترک میآیند. به همین دلیل است که یادگیری Illustrator پس از استفاده از Inkscape چندان دشوار نیست. Inkscape و Illustrator به یک شکل عمل می کنند زیرا هر دو نرم افزار برداری هستند که پایه یکسانی دارند.
در حالی که Illustrator به استاندارد آژانسها و استودیو های طراحی گرافیک تجاری تبدیل شده است، ابزار Inkscape در واقع به شما اجازه میدهد تا طراحی های خلاقانه ای به خوبی آن هایی که با نرمافزار تجاری ایجاد میشوند، ایجاد کنید. بنابراین هرچه در این نرم افزار پیشرفته تر می شوید، اگر می خواهید به سمت نرم افزار های برداری تجاری مانند Illustrator بروید، منحنی یادگیری بسیار آسان تر می شود.
همانطور که می بینید، Inkscape یک برنامه ویرایش وکتور قدرتمند است که کاربران مبتدی و پیشرفته می توانند از آن استفاده کنند. همچنین Inkscape یک انتخاب عالی برای استفاده شخصی و حرفه ای است. یکی از مهم ترین مزایای آن این است که نرم افزار رایگان و منبع باز است که می توانید آن را در ویندوز، لینوکس و مک دانلود کنید. با این حال، علیرغم اینکه نرم افزار رایگان است، به شدت با نرم افزار های تجاری مانند Adobe Illustrator یا ابزار Corel Draw رقابت می کند.
منبع: selfmadedesigner.com
نوشته معرفی کامل ابزار طراحی گرافیک Inkscape و مزایای آن اولین بار در ممتاز دیزاین. پدیدار شد.
]]>