موکاپ و کاربرد آن در طراحی

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

موکاپ چیست؟

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

انواع دسته بندی موکاپ:

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

موکاپ انواع مختلفی دارند و بسته به کاربردی که شما از آنها می خواهید به دسته های مختلفی تقسیم می شوند و می توان رایج ترین آنها را به شرح زیر نام ببریم:

· موکاپ های مبتنی بر طراحی رابط کاربری

· موکاپ های فیزیکی

· موکاپ های بسته بندی

· موکاپ های مدل سازی

· موکاپ برای انواع طراحی

موکاپ های مبتنی بر طراحی رابط کاربری

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

این موکاپ‌ها می‌توانند چندین صفحه نمایش به هم مرتبط داشته باشند و سفر مشتری را در محصول ترسیم کنند.

موکاپ‌‌های فیزیکی

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

موکاپ‌های طراحی بسته‌بندی

بسته بندی مهم است زیرا بخشی از طراحی هویت بصری برند شماست. بسته بندی می تواند شامل طراحی ظاهر برند و قابلیت‌هایی باشد که فراهم می‌کند. موکاپ بسته‌بندی قبل از تولید انبوه می تواند بسیار مقرون به صرفه باشد.

مدل‌های شبیه‌سازی

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

موکاپ برای انواع طراحی‌ها

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

معرفی چند سایت برای دانلود موکاپ

از جمله سایت هایی که شما می توانید از آنها موکاپ تهیه کنید می توان به سایت های زیر اشاره کنیم: Freepik, Envato elements و Yellow image .

سایت Envato elements

این سایت یکی از سایت های فوق العاده در بحث ارائه عکس، ویدئو، افکت صوتی، فایلهای گرافیکی، پلاگین و ... می باشد که شما می توانید برای دانلود کردن موکاپ هم از این سایت کمک بگیرید.

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

برای دانلود کردن طرح هم از سایت کافی است که لینک طرح مورد را کپی کردن و وارد ربات تلگرامی Decodl شوید و بعد از ثبت نام و خرید بسته لینک را به این ربات بدهید تا در کمتر از 30 ثانیه لینک دانلود در اختیار شما قرار بگیرد.

آموزش استفاده از ربات را اینجا ببیند.

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

سایت Freepik

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

برای دیدن موکاپ های سایت Freepik میتوانید به منوی بالای صفحه گزینه PSD را انتخاب کرده و در زیر منو روی گزینه Mockup کلیک کنید تا همه موکاپ های این سایت را به صورت دسته بندی مشاهده نمایید.

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

سایت Yellow image

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

این سایت داری مجموعه های مختلفی از موکاپ ها می باشد که از این بخش ها می توان به : موکاپ های بسته بندی، پوشاک، وسائل نقلیه، تبلیغات، لوازم التحریر و ... اشاره کرد.

به عنوان مثال من دنبال یک موکاپ هودی میگردم برای ارائه طرح به کارفرما کافی است بخش Mockup رفته و گزینه Hoodies را انتخاب کنم تا تمامی طرح های این بخش را برای من نمایش دهد.

و بعد از انتخاب طرح مورد اقدام به خرید طرح بکنم.

چرا موکاپ YELLOW IMAGES ؟

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

تا اینجای این مطلب اقدام به معرفی 3 سایت معتبر در خصوص ارائه موکاپ کردیم ولی اگر شما قصد خرید از این سایت ها خرید کنید نیازمند داشتن اکانت معتبر و حساب دلاری هستید که با توجه به تحریم های اعمال شده برای کشور ما این مورد کمی مشکل ساز شده و شما باید به صورت رابطه ای از این سایت ها اقدام به خرید کنید که در بعضی از اوقات شاید به مشکلاتی برخورد کنید، اما شما با سایت Decodl می توانید در کمتر از 1 دقیقه لینک دانلود را اتوماتیک، ارزان و سریع دریافت کنید.

آموزش دانلود بدون محدودیت از سایت دکو دی ال

نحوه استفاده از موکاپ ها در برنامه فتوشاپ

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

موکاپ ها معمولا از اسمارت آبجکj ها ساخته می شوند. شاید بگویید که اسمارت آبجکj چیست؟؟ در جواب این سوال هم باید خدمت شما عرض کنیم که اسمارت آبجکت ها یکی از قابلیت های کلیدی و پر کاربرد در فتوشاپ هستند که امکان ویراش غیر مخرب برروی تصاویر را به کاربر ها می دهند.

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

1- در ابتدا باید فایل موکاپ که معمولا پسوند آن PSD یا TIFF می باشد را با برنامه فتوشاپ باز کنیم.

2- حالا در بین لایه ها به دنبال لایه با نام اسمارت آبجکت بگردید. ولی معمولا طراحان برای پیدا شدن بهتر لایه اسمارت آبجکت ها یک متن راهنما مانند ” Add logo here ” یا ” Place Logo here ” و… روی لایه قرار میدهند تا به راحتی بتوان لایه مورد نظر را شناسایی کنیم. ولی اگر از روی نام لایه ها هم نتوانستید لایه اسمارت آبجکت را پیدا کنید از روی آیکون کنار لایه که به شکل یک "کاغذ تا خورده" می باشد هم می توانید این لایه را پیدا کنید.

3- بعداز یافتن لایه اسمارت آبجکت باید به محتویات این لایه دسترسی پیدا کنیم و برای این کار هم می توانید به یکی از دو روش زیر عمل کنید.
روش اول : روی لایه اسمارت آبجکت کلیک رایت نموده و از منوی باز شده گزینه Edit Contents را انتخاب کنید.

روش دوم: روی لایه دو بار کلیک کنید.

4- بعد از باز شدن لایه یک سند جدا برای شما نمایش داده خواهد شد، که این سند محتویات اسمارت آبجکت و واسطه به سند اصلی شماست و شما با تغییر دادن این لایه می توانید روی سند اصلی تغییرات جدید اعمال کنید. و کافی است که شما طرح مورد نظر را درون این لایه قرار داده و با استفاده از کلید های ترکیبی Ctrl+s سند را ذخیره کنید و به سند اصلی مراجعه و مشاهده خواهید نمود که طرح جدید جایگزین طرح قدیمی شده است.

برای مثال قصد داریم طرح زیر را روی یک موکاپ رومیزی قرار دهیم و طرح موکاپ شده رو برای مشتری ارسال کنیم. پس به صور زیر عمل می کنیم.

در ابتدا طرح مورد نظر و همچنین طرح موکاپ رو با برنامه فتوشاپ باز می کنیم.

در بین لایه ها لایه ای که با نام اسمارت آبجکت هست را با روش دابل کلیک کردن رو لایه باز می کنیم.

یک سند جدید برای ما نمایش داده می شود. طرح مورد نظر را با استفاده از روش کشیدن و رها کردن (drag and drop) به داخل سند جدید که باز شده می کشیم.

و بعد از تغییر سایز دادن و تنظیم کردن طرح با اندازه سند با استفاده از کلیدهای ترکیبی Ctrl+s سند را ذخیره می کنیم، الان این سند را بسته و به سند موکاپ بروید و مشاهده خواهید کرد که طرح جایگزین طرح خام قبلی موکاپ شده.

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