آموزش فتوشاپ و طراحی وب

موکاپ چیست و چگونه از آن استفاده میشود


موکاپ چیست و چگونه از آن استفاده میشود

 

عرض سلام دارم خدمت تمامی دوستان عزیز

در این مطلب قرار هست که به فایل های موکاپ (Mockup ) بپردازیم و نحوه استفاده از این فایل ها رو یاد بگیریم ، علاوه بر این آموزش تصویری نحوه استفاده از فایل های موکاپ رو هم قرار دادم  میتونید دانلود کنید و از این آموزش استفاده کنید ، پس همراه پیکسل بوی باشید تا بهتر با فایل های موکاپ (Mockup) آشنا بشید

 

 

دانلود ویدئو آموزش استفاده از فایل های موکاپ

  سایز:14mb
  زمان: 7 دقیقه
  لینک دانلود

 

موکاپ (mockup) چیست؟

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

به طور کلی mockup این امکان را به طراح میدهد تا بتواند بهتر بر روی جزئیات طرح از جمله انتخاب رنگ ، سایز ، سبک نمایش و … تصمیم گیری کند

 

نحوه استفاده ازفایل های موکاپ(mockup) در نرم افزار فتوشاپ

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

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

بخوانید :   دانلود فونت زیبای ادوب عربیک شین

 

1.ابتدا فایل موکاپ که دارای پسوند PSD  یا Tiff هستش وارد فتوشاپ کنید

موکاپ چیست و چگونه از آن استفاده میشود

2.سپس طبق توضیحات که دادیم باید به دنبال لایه اسمارت آبجکتش بگردیم ، چطور تشخیض بدیم که لایه اسمارت کدومه ؟ خوب خیلی راحته لایه های اسمارت آبجکت با لایه های معمولی یکمی فرق دارن ، کوشه پایین این لایه ها یه آیکن به شکل ” کاغذ تا خورده ”  قرار گرفته ، اگر همچین آیکنی رو مشاهده کردید بدونید که این لایه یک لایه اسمارت آبجکت هستش

موکاپ چیست و چه کاربردی در فتوشاپ دارد

معمولا طراحای گرافیک  بر روی لایه اسمارت آبجکت موکاپ یک متنی راهنما مثل ” Add logo here ” یا ” Place Logo here ” و… قرار میده تا متوجه بشیم که مدوم لایه رو باید محتویاتش رو تغییر بدیم

 

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

نحوه تغییر محتویات اسمارت آبجکت

  1. روش اول ، روی لایه اسمارت آبجکت مورد نظر کلیک راست کرده و از بین گزینه ها گزینه Edit Contents را انتخاب کنید
  2. بر روی تصویر شاخص یا همان Thumbnail دو بار کلیک کنید (ناحیه قرمز)

تصویر شاخص لایه در فتوشاپ

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

آموزش استفاده از فایل های موکاپ در نرم افزار فتوشاپ

اما این پایان کار نیست بر روی هر سندی که تغییرات اعمال میشه باید حتما اون سند ذخیره بشه  پس باید از منوی Edit  گزینه Save  رو انتخاب کنید و یا دکمه Ctrl + S  رو فشار بدید تا تغییرات ذخیره بشن . بسته به نوع افکت هایی که در موکاپ ایجاد شده کمی زمان میبره تا تغییرات براتون ذخیره ، بعد از اتمام ذخیره شدن میتونید برگردید به سند اصلی و محتوای جدیدی رو که خودتون جایگزین کردید رو مشاهد کنید

بخوانید :   مشکل جدا جدا نویسی در فتوشاپ

 

سپاس از همراهی شما عزیزان ، اگر مشکلی داشتید از بخش نظرات مشکلتون رو مطرح کنید

کانال تلگرام پیکسل بوی

مطالب مرتبط


امیرحسین

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

   بخش نظرات

  1. ناشناس گفت:

    آقا تو فیلم یه گزینه ای بود که می زدید متن برداشته می شد … از من نداره هرر کاری می کنم هم نمیشه

    • امیرحسین گفت:

      برای حذف لایه متن باید یک لایه جدید ایجاد کنید با استفاده از Ctrl + Shift + N و بعدش رو لایه متن کلیک راست کنید و گزینه Delete Layer رو انتخاب کنید تا لایه متن حذف بشه یا این که میتونید لایه متن رو پنهان کنید

  2. Nasr گفت:

    سلام .خیلی ممنون …..اما من میخوام پس زمینه هم تغییر کنه و بعد متن یالوگو رو روی تصویر جدید بذارم

  3. طاها گفت:

    سلام و عرض خسته نباشید
    ببخشید من درموکاپ مشکل دارم
    مثلا موکاپ اتشین شمارو میخواستم متن مث همون آتیش روش اجرا کنم ولی نتونستم ممنون میشم راه حل بهم بدین

    • امیرحسین گفت:

      سلام اگه درنحوه استفاده از موکاپ مشکل داری پیشنهاد میکنم که حتما ویدئو آموزشی مطلب رو تماشا کنی تا بهتر با فایل های موکاپ آشنا بشی

      اما اگر مشکل دیگه ای هست بیشتر توضیح بدید

  4. Javadagha گفت:

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

    آیدی تلگرامم.@single_mj

  5. کشاورزی گفت:

    سلام و خسته نباشید
    من موکاپ طلایی روی زمینه ی مشکی رو دانلود کردم رمز فایل رو درست زدم باز میکنه اما در فوتوشاپ پیام خطا میده و باز نمیکنه میشه بگید چراااااا؟؟؟؟؟

    • امیرحسین گفت:

      سلام ممنونم سلامت باشید
      شما اول باید فایل رو از حالت فشرده به کمک نرم افزار winrar خارج کنید . فقط کافیه که روی فایل کلیک راست کنید و گزینه Extract Here رو انتخاب کنید تا از حالت فشرده خارج بشه و در نهایت از فایل PSD موجود استفاده کنید
      موفق باشید

  6. محمد حسین شعبان گفت:

    سلام
    واسه من اون گوشه نمیاد اصلا
    یعنی اون کاغذ تا خورده نمیاد

    • امیرحسین گفت:

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

  7. فرزاد گفت:

    سلام داداش خواستم تشکر کنم از سایت خوبتون و اینکه یه مورد دیگه شما اموزش ساخت موکاب هم دارید ؟ چون این فقط میشه یه جورایی جایگزینی متن نحوه ساختشو میخاستم خواستم بدونم ویدئویی در این مورد record کردید ؟

    • امیرحسین گفت:

      سلام خواهش میکنم آقای فرزاد خان !
      خیر تا به حال دوره ای با موضوع ” ساخت موکاپ ” تهیه نکردیم اما قرار که همچین دوره ای رو ضبط کنیم

  8. حمیدرضا گفت:

    سلام
    من فوتوشاپ ۲۰۱۷ نصب کردم موکاپ و وارد فوتوشاپ کردم edit contents هم زدم اما قسمتی ک باید متن و ویرایش کنم رو علامت متن ک میزنم میگه no layers match the filter ، میشه راهنمایی کنید

  9. مهرگان گفت:

    سلام
    ممنون از سایت خوبتون.
    من در رابطه با استفاده از موکاپ لوگو با یه مشکل مواجه شدم و اونم اینکه وقتی روی smart object کلیک میکنم و گزینه edit content را میزنم اون سند جدید درست میشه ولی اون لایه adjust را نداره و فقط یه لایه عکس یا نوشته داره
    ممنون میشم اگه راهنماییم کنید

    • امیرحسین گفت:

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

  10. رزرو هتل در مشهد گفت:

    ممنون از شما خسته نباشید

  11. مهدی عبداللهی گفت:

    سلام خسته نباشید.به یک موکاپ اختصاصی برای پرده نیازمندیم

    • امیرحسین گفت:

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

  12. محمد علی اخلاقی گفت:

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

  13. امیرحسین عزیزی گفت:

    واقعا عالی تو ضیح میدی

  14. میترا گفت:

    خیلی عالی بود….ممنون

  15. بنیامین موسوی گفت:

    عالی بود ممنون از سایت شما

  16. محمد گفت:

    چگونه در فتوشاپ عکسی مانند ارم بارسلونا وارد کنم ؟و اینکه چجوری در پایان تبدیل به عکسش کنم؟

    • امیرحسین گفت:

      سلام برای وارد کردن لوگو مورد نظر ابتدا باید تصویر رو به صورت PNG و شفاف(transparent) از اینترنت دانلود کنید و از طریق منوی File گزینه open تصویرتون رو وارد فتوشاپ کنید ، در نهایت هم برای خروجی گرفتن کافیه که دکنه های Ctrl + Shift + Alt + S رو فشار بدید و با فرمت JPEG تصویر رو ذخیره کنید

  17. Alireza گفت:

    چجوری میتونیم خودمون یه اسمارت آبجکت بسازیم؟

  18. امید احمدی گفت:

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

    • امیرحسین گفت:

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

  19. روحان الدین گفت:

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

    تلگرام من ۰۰۹۳۷۸۴۳۶۶۸۷۰
    آدرس فیسبوک Rohan Aman Qaderi
    آدرس اینستاگرام qaderi rohan
    وایمسل آدرس من rohanuddin.qadari@gmail.com




تمام حقوق مادی و معنوی متعلق است به پیکسل بوی - طراحی قالب امیرحسین شهسواری