موکاپ (mockup) چیست؟
موکاپ(mockup) اصطلاحی است که طراحان وب و گرافیک برای فایل پیش نمایش استفاده میکنند ، mockup ها فایل های آماده گرافیکی هستند که در موضوعات مختلفی مثل لوگو ، کارت ویزیت ، پوستر ، قالب سایت و … استفاده میشود . فایل های موکاپ(mockup) در نرم افزار فتوشاپ به صورت PSD ایجاد میشود و همان طور که گفته شد طراحان از موکاپ ها به عنوان یک پیش نمایش برای آثار خود استفاده میکنند . فرض مثال طراح گرافیکی اثری مانند لوگو طراحی میکند و میخواهد نتیجه اثر خود به صورت یک طرح چاپ شده بر روی کاغذ مشاهده کند ، بهترین راه استفاده از یک موکاپ برای نمایش نتیجه نهایی است که به بهترین شکل صورت میگرد و میتواند نتیجه را به مشتری نشان دهد تا رضایت مشتری جلب کند
به طور کلی mockup این امکان را به طراح میدهد تا بتواند بهتر بر روی جزئیات طرح از جمله انتخاب رنگ ، سایز ، سبک نمایش و … تصمیم گیری کند
نحوه استفاده ازفایل های موکاپ(mockup) در نرم افزار فتوشاپ
خوب فهمیدیم که موکاپ ها چه فایل هایی هستند ، اما فایل های موکاپ رو چطوری میسازن؟ فایل های موکاپ همگی بر اساس اسمارت آبجکت ها ساخته میشن ، و موکاپی وجود نداره که از اسمارت آبجکت استفاده نکرده باشه ، اسمارت آبجکت ها یکی از قابلیت های کلیدی و پر کاربرد در فتوشاپ هستند که امکان ویرایش غیر مخرب بر روی تصاویر رو به ما میدن . اگر با اسمارت آبجکت ها آشنایی ندارید به این مطلب در سایت پیکسل بوی حتما سر بزنید تا با این قابلیت مهم آشنا بشید
اما بریم سراغ نحوه استفاده از فایل های mockup ، همون طور که گفته شد تمامی این فایل ها دارای اسمارت آبجکت هستند ، و محتوای موکاپ ها داخل اسمارت آبجکت ها قرار گرفتن ، برای استفاده از فایل های موکاپ(mockup) باید محتویات اسمارت آبجکت موجود در سند اصلی رو تغییر بدیم تا محتویات جدید جایگزین محتویات فعلی بشن . در این مثال همه چیز مشخصه
.ud38bcae5a2033d2499d956b7dc39e017 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #D35400!important; text-decoration:none; } .ud38bcae5a2033d2499d956b7dc39e017:active, .ud38bcae5a2033d2499d956b7dc39e017:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .ud38bcae5a2033d2499d956b7dc39e017 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .ud38bcae5a2033d2499d956b7dc39e017 .ctaText { font-weight:bold; color:#D35400; text-decoration:none; font-size: 16px; } .ud38bcae5a2033d2499d956b7dc39e017 .postTitle { color:#2C3E50; text-decoration: underline!important; font-size: 16px; } .ud38bcae5a2033d2499d956b7dc39e017:hover .postTitle { text-decoration: underline!important; }
1.ابتدا فایل موکاپ که دارای پسوند PSD یا Tiff هستش وارد فتوشاپ کنید
2.سپس طبق توضیحات که دادیم باید به دنبال لایه اسمارت آبجکتش بگردیم ، چطور تشخیض بدیم که لایه اسمارت کدومه ؟ خوب خیلی راحته لایه های اسمارت آبجکت با لایه های معمولی یکمی فرق دارن ، کوشه پایین این لایه ها یه آیکن به شکل ” کاغذ تا خورده ” قرار گرفته ، اگر همچین آیکنی رو مشاهده کردید بدونید که این لایه یک لایه اسمارت آبجکت هستش
معمولا طراحای گرافیک بر روی لایه اسمارت آبجکت موکاپ یک متنی راهنما مثل ” Add logo here ” یا ” Place Logo here ” و… قرار میده تا متوجه بشیم که مدوم لایه رو باید محتویاتش رو تغییر بدیم
3.بعد از شناسایی لایه اسمارت آبجکت باید به محتویات اسمارت آبجکت دسترسی پیدا کنیم تا بتوینم محتویات خودمون رو جایگزین کنیم
نحوه تغییر محتویات اسمارت آبجکت
- روش اول ، روی لایه اسمارت آبجکت مورد نظر کلیک راست کرده و از بین گزینه ها گزینه Edit Contents را انتخاب کنید
- بر روی تصویر شاخص یا همان Thumbnail دو بار کلیک کنید (ناحیه قرمز)
بعد از انجام این کار مشاهده میکنید که یک سند جدید براتون باز میشه ، این سند در واقع محتویات اسمارت آبجکت هستش و به سند اصلی شما ارتباط داره ، محتویات این سند ممکنه عکس ، وکتور ، متن و… باشه ، محتویات فعلی رو باید حذف کنید و محتویات خودتون رو جایگزین کنید
اما این پایان کار نیست بر روی هر سندی که تغییرات اعمال میشه باید حتما اون سند ذخیره بشه پس باید از منوی Edit گزینه Save رو انتخاب کنید و یا دکمه Ctrl + S رو فشار بدید تا تغییرات ذخیره بشن . بسته به نوع افکت هایی که در موکاپ ایجاد شده کمی زمان میبره تا تغییرات براتون ذخیره ، بعد از اتمام ذخیره شدن میتونید برگردید به سند اصلی و محتوای جدیدی رو که خودتون جایگزین کردید رو مشاهد کنید