تمدید جشنواره نوروز به درخواست شما فرصت باقیمانده مشــاهـده جشنـــواره
آموزش فتوشاپ 14 دقیقه 84

آموزش ساخت جعبه ی موکاپ برای یک محصول

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

آموزش ساخت جعبه ی موکاپ برای یک محصول

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

آموزش ساخت جعبه ی موکاپ در فتوشاپ

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

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

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

final-results

منابع مورد نیاز آموزش ساخت جعبه موکاپ

دو عدد فونت از سایت دافونت که از زیر می توانید دانلود کنید.

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

مرحله ی اول

اندازه ی پرونده را  1588*1191 و رنگ پس زمینه را #d2d3d5  قرار دهید.

2

برای اینکه طراحی تمیزتری داشته باشید از Ruler و  Grid استفاده کنید، برای دستیابی به Ruler : View → Rulers یا  کلید های میانبر Ctrl + R

همچنین برای دستیابی به gird: View → Show → Grids یا کلید های میانبر  Ctrl + , .

لطفا تنظیمات گرید بندی فتوشاپ خودتون رو مانند من کنید تا در ادامه مشکلی پیش نیاد.

3

مرحله ی 2

گروهی تحت نام Right Side بسازید. یک لایه ی جدید بسازید و آنرا Right Side بنامید، با استفاده از Rectangular Marquee Tool،سلکشنی به بزرگی 795*1078 پیکسل درست کنید.
سپس سلکشن را با هر رنگی که دوست دارید پر کنید.(مثلا: رنگ #FFFFFF)

2-1

سپس به Smart Object  تبدیلش کنید،( روی لایه ی مورد نظر راست کلیک کنید سپس گزینه ی Make A Smart Object را انتخاب کنید.)

مرحله ی 3

گروه دیگری بنام Left Side بسازید. سپس یک لایه بنام Left Side بسازید.

مانند قبل باید سلکشنی با رنگ دلخواه درست کنیم به اندازه ی 483*1078 پیکسل و بعد آنرا Smart Object کنیم.

مرحله ی 4

با سمت راست جعبه شروع میکنیم، لایه مورد نظر را انتخاب کنید و کلیدهای Ctrl + T که برای ترنسفرم استفاده میشوند را بفشارید و به اندازه ی 75% کج (منقبض) کنید تا به ارتفاع 814 برسد.

مطمئن شوید در زمان کوچک کردن بر آیکن Chain کلیک کرده باشید. سپس به منوی Edit → Transform بروید و به مقدار دلخواه  Perspective کنید.

4a

سپس Ctrl+T را بفشارید، کلید Ctrl را نگه دارید و سمت راست شکل را مقداری داخل ببرید.

4

مرحله 5

برای قسمت چپ جعبه، ابتدا مانند مراحل قبل به اندازه ی 75% کج کنید.(منقبض کردن)

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

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

5

مرحله 6

حالا به مرحله ی طراحی متن میرسیم.

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

من از رنگ آبی آسمانی برای جعبه استفاده کردم.پس رنگ background را به #e1ebe4 تغییر دهید، سپس از فونت های زیر برای متن استفاده کنید و در وسط قرارش دهید رنگش را نیز  #1f1f20 بگذارید.

6a

میتوانید جزییات بیشتری را به همراه تکست های مختلف اضافه کنید، برای بهتر شدن کار از سیمبول هم استفاده کنید.

6b

این مرحله را با اضافه کردن یک متن رندم در پایین کادر به پایان میرسانیم.

مرحله 7

برای قسمت چپ جعبه مانند مرحله قبل بر روی Smart Object دابل کلیک میکنیم،رنگ Backgorund  را به  #a5dfda تغییر میدهیم.

سپس یک کپی از آن را میگیریم موضوعی را برایش قرار میدهیم ، سیمبول اضافه میکنیم و رنگ سیمبول هارا نیز تغییر میدهیم.

7a

سپس یک متن رندم در پایین کادر قرار دهید.

7b

مرحله 8

حالا کارمان با طراحی  متن تمام شده است و باید کمی سایه به کار اضافه کنیم.

یه گروه جدید میسازیم و آنرا Shadows مینامیم، سپس درون گروه جدید یک لایه بسازید و آنرا Back نام دهید.

یک سلکشن بزرگتر از جعبه بسازید و آنرا مشکی کنید و مانند تصویر پایین با استفاده از کلید Ctrl آنرا کج کنید سپس Gaussian Blur را بکار گیرید و Blend Mode  را به Soft Light تغییر دهید.

8

مرحله 9

لایه ای جدید دیگری بسازید و نام آنرا Bottom بگذارید. Foregorundcolor را #000000 کنید. Brush Tool را بردارید از سایز بزرگش با Hardness=0% استفاده کنید.

در پایین جعبه بصورت رندم به رنگ کردن بپردازید، Blend Mode را روی Soft Light و Opacity=85% قرار دهید .

9

مرحله 10

لایه ای بنام Light بسازید. background color را #ffffff کنید، سایز Brush را بزرگتر کنید و 3 دفعه بر مرکز کلیک کنید. Blend Mode  را به Soft Light تغییر دهید.

10

مرحله 11

یک لایه ی جدید  تحت نام Bottom2 درست کنید. و Brush Tool  را بردارید و تنظیمات آنرا مانند پایین تغییر دهید.

6

Pentool را بگیرید واطراف پایین جعبه یک Path بسازید سپس راست کلیک کنید و به Path حاشیه(stroke) بدهید و مطمئن شویدسپس Opacity  و fill به ترتیب %50 و %55 برسانید.

11b

مرحله ی 12

گروه Right side را باز کنید، دو لایه جدید بنام های Shadows  و  Shadows2 بسازید و آنهارا به لایه ی متن clipping mask  کنید.

از Brush  با Hardness=0% استفاده کنید. Blend Mode هر دو لایه را به Soft Light تغییر دهید.

در لایه ی Shadow یک شکل U مانند اطراف جعبه بکشید. در لایه ی دوم از همان Brush ولی با Opacity کمتر در اطراف نوشته استفاده کنید تا عمق و تاکید بیشتری را نشان دهیم.

12

مرحله ی 13

دو لایه ی جدید به نام های ‘details:shadows’ , ‘details:highlights’ بسازید. در این مرحله  فقط میخواهیم مرحله ی 11 را تکرار کنیم.

رنگ #ffffff را برای highlights و  #000000 را برای shadows استفاده کنید. Pathی در بالا و پایین جعبه بسازید.

مرحله 14

2 مرحله قبل را برای قسمت چپ جعبه تکرار کنید.

14

مرحله 15

یک گروه جدید تحت عنوان Details بسازید. یک لایه جدید با نام Left Flap درست کنید. Pen Tool را بگیرید و مثلثی با مرکزی تقریبا تخت بسازید.

سپس راست کلیک کرده و آنرا با رنگ #767676 پرکنید. در ادامه باید به آن Inner Shadow اضافه کنید.

20

سپس کمی Inner Glow:

21

مرحله 16

لایه ی جدید بنام Shadow بسازید. میتوانید مانند مرحله 11 عمل کنید اما با Brush  بزرگتر (سایز 4-6) ، خطی بین قسمت راست و چپ جعبه بندازید(بیشتر به سمت راست مایل باشید).

سپس با Gussian Blur کمی محوش کنید، blend Mode را روی Soft Light قرار دهید.( مانند خط قرمز در تصویر پایین)

16

مرحله 17

مراحل قبل را تکرار کنید و نام لایه را Highlights بگذارید و رنگ #ffffff بگار بگیریدو همانگونه که رنگ میکنید بیشتر متمایل به چپ باشید.(مانند خط آبی )

17

مرحله 18

یک لایه ی دیگر با نام Line ایجاد کنید و Line Tool را بکار گیرید (نهایت 2-3 پیکسل)  در بین قسمت راست و چپ با رنگ #000000 یک خط قرار دهید. Blende Mode را روی Soft Light بگذارید.(مانند خط سفید تصویر پایین)

18

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

final-results-1

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

untitled-4

امتیاز: 0 از ۵ - تعداد رای: 0
اشتراک گذاری این صفحه
گفتگو و سوالات شما در این قسمت میتوانید نظر یا سوال خود را در مورد مقاله یا آموزش مطرح کنید.
دیدگاهتان را بنویسید برای ارسال دیدگاه لازم است در سایت وارد شده یا ثبت نام کنید ...
6 دیدگاه به گفتگوی ما بپیوندید و نظرتان را با ما به اشتراک بگذارید ...
کاربر بیت گرف 1399/11/10

ممنون ولی باید بیشتر شکل میذاشتین.مثلا اینکه مثلث رو کجا و چطوری قرار بدیم با شکل قابل فهم تر بود.یا سایه ها

    تیم پشتیبانی بیت گرف 1401/01/17

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

کاربر بیت گرف 1396/08/02

عالی بود، انصافا عالی توضیح داده بودی کلی کارم راه افتاد و ایده های جدیدی گرفتم

ehsan malaei 1396/06/19

سلام
استاد فیلم اینو بی زحمت قرار بدید

کاربر بیت گرف 1396/01/06

میگم از این چرا فیلم نمیزنید چون تو فیلم راحت توضیح میدی خوبه الان مممم درکش سخته

    ارسطو اعتمادی 1396/01/06

    سلام چشم قرار میدیم!

مطالعه با تمرکز بیشتر
پست های پربازدید هفته 6 پست پربازدید در دسترس شماست!
آموزش هوش مصنوعی استیبل دیفیوژن...

آموزش هوش مصنوعی استیبل دیفیوژن...

مهسا سلطانی
دانلود و نصب اسکریپت motion...

دانلود و نصب اسکریپت motion...

احسان ملائی
دانلود اسکریپت Motion Bro v4.0.4...

دانلود اسکریپت Motion Bro v4.0.4...

مهدی فریدونی
دانلود Adobe Firefly | هوش...

دانلود Adobe Firefly | هوش...

مهدی فریدونی
دانلود پلاگین FilmImpact Transition v4.7.2...

دانلود پلاگین FilmImpact Transition v4.7.2...

مهدی فریدونی
میدجورنی رایگان و نحوه استفاده...

میدجورنی رایگان و نحوه استفاده...

مهسا سلطانی
دوره روتوش
دوره جامع گرافیک و ویدیو
×