طراحی یک آیپد واقعی – آموزش فوتوشاپ

طراحی یک آیپد واقعی – آموزش فوتوشاپ
  • 1391/5/14
  • مهرداد ارجمندی
  • 0

 

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

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

قدم 1 : پایه شکل آیپد .

کار را با ایجاد یک فایل جدید با اندازه 1500×800 px شروع کنید . ابزار rectangle را فعال کنید . حالت آن را به shape با شعاع 15 پیکسل و رنگ کد #f5f5f5 تنظیم کنید .

 

به لایر استایل Inner Glow و Stroke اضافه کنید .

 

قدم 2: صفحه نمایش

یک مستطیل درون آیپد بکشید .

به لایر استایل Stroke اضافه کنید .

قدم 3:

یک تصویر ساده برای صفحه نماش آیپد خودمان درست می کنیم . یک لایه جدید درست کنید و مطمئن شوید که بر روی لایه صفحه نمایش قرار دارد . به کمک یک قلم ملایم و نرم کمی رنگش کنید . لایه را به کمک فشردن Ctrl/Cmd + Alt + G  به ماسک Clipping تبدیل کنید .حالا هرچیزی را که رنگ می کنید درون صفحه نمایش قرار می گیرد .

قدم 4: دکمه خانه یا همان دکمه هوم وسطی

یک بیضی در قسمت پایین آیپد بکشید . Fill آن را بر روی0% تنظیم کنید .

لایر استایل Inner Shadow را اضافه کنید همچنین Bevel و Emboss و Gradient Overlay را هم اضافه کنید .

 

قدم 5:

در مرکز دکمه یک مستطیل  با گوشه های گرد بکشید . Fill آن را بر روی0% تنظیم کنید و لایر استایل Stroke را اضافه کنید .

قدم 6: دوربین

یک قسمت مشکی کوچک در قسمت بالای آیپدتان به عنوان دوربین آن بکشید

قدم 7:

یک مستطیل که قسمت پایین صفحه نمایش را پوشش می دهد بکشید . رنگ آن را به کد #b1a9a9 تنطیم کنید . لایر استایل را اضافه کنید .

قدم 8 : Ctrl/Cmd + T را فشار دهید تا تغییر اندازه و شکل را فعال کنید . راست کلیک کنید و Perspective را انتخاب کنید .

قدم 9:

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

قدم 10 :

مانند تصویر زیر شکل های سفید بکشید . کلید های  Ctrl/Cmd + Alt + G را فشار دهید تا آن را به حالت Clipping Mask تبدیل کنید . شفافیت آن را به 50% برسانید .

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

قدم 11:

یک سری از آیکن های آیفن را جمع کنید می توانید آنها را از سایتهای مختلفی بگیرید : Aquaticus از marcelomarfil . چهار تا از آنها را در روی صفحه نمایش بگذارید .

 

قدم 12 :

آیکن ها را در یک گروه به اسم آیکن قرار دهید . تمامی لایه های آیکن ها را با کلیک بر روی اولین آیکن و سپس Shift + click بر روی آخرین آیکن انتخاب کنید . ابزار جابجایی را فعال کنید .  از نوار آپشن بر روی icon Distribute Horizontal Center و Align Vertical Center کلیک کنید  و بدین ترتیب شما یک هم ترازی و توزیع بسیار مناسب برای آیکن ها خواهید داشت .

قدم 13 :

قدم های قبلی را تکرار کنید تا تعداد بیشتری آیکن بر روی صفحه نمایش داشته باشیم .

قدم 14:

لایه های آیکن را بر روی قسمت لنگر مانند انتخاب کنید . Ctrl/Cmd + E را فشار دهید تا حالت تغییر اندازه و شکل را فعال کنید . راست کلیک کنید و چرخش عمودی را انتخاب کنید .

قدم 15 :

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

قدم 16:  انعکاس صفحه نمایش

با استفاده از ابزار lasso polygon یک انتخاب مثلثی در بالای گوشه سمت راست صفحه نمایش درست کنید . آن ناحیه را با رنگ سفید پر کنید .

قدم17 :

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

قدم 18 :

Ctrl/Cmd را به همراه کلیک کردن بر روی لایه آیپد انجام دهید تا یک پایه انتخاب برای این شکل ایجاد شود . یک لایر ماسک به گروه اضافه کنید . بدین صورت انعکاس صفحه نمایش درون صفحه نمایش قرار می گیرد .

قدم 19 : اسمارت کاور

شکل زیر را بکشید . می توانید برای آن از رنگ کد #6ebced استفاده کنید .

به آن Layer Styles Gradient Overlay اضافه کنید .

 

قدم 20 :

در بالای اسمارت کاور یک شکل مستطیل گرد بکشید و Fill آن را به 0% تنظیم کنید .

Bevel و Emboss به آن اضافه کنید .

قدم 21 :

شکل را داپلیکیت کنید .

قدم 22 :

Ctrl/Cmd + T را فشار دهید تا حالت تغییر شکل را فعال کنید . راست کلیک کنید و Perspective را انتخاب کنید . گوشه بالا سمت راست را بکشید تا جایی شکل به صورت و شبیه اسمارت کاور در بیاید .

قدم 23 :

یک مستطیل گرد با کد رنگ #82858a بکشید . یک بار دیگر حات تغییر شکل را فعال کنید و یک بار دیگر ما بیرون از محیط اسمارت کاور هستیم پس آن را تنظیم کنید .

قدم 24 :

Layer Styles Bevel و Emboss و Gradient Overlay را اضافه کنید .

 

قدم 25 :

یک مستطیل گرد دیگر بکشید و آن را درون شکلی که همین الان درست کردیم قرار دهید .

 

قدم26 :

Layer Style Bevel و Emboss را اضافه کنید و Fill را به 0% تنظیم کنید .

قدم 27 :

Ctrl/Cmd + Alt + G را فشار دهید تا شکل را به کلیپینگ ماسک تبدیل کنید و حالا افکت را درون کاور قرار دهید .

قدم28 : لولا ها

یک مستطیل در گوشه سمت چپ کاور بکشید و کد رنگ آن را #6ebced بگذارید .

Gradient Overlay اضافه کنید .

 

قدم 29 :

یک مستطیل کوچکتر در پشت شکل ها با کد رنگ #e6e6e6 بکشید .

Layer Style Gradient Overlay اضافه کنید تا ظاهری سه بعدی به شکل بدهیم .

قدم 30 : سایه ها

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

قدم 31 :

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

 

قدم 32 :

یک لایه جدید درست کنید و آن را در زیر همه لایه های دیگر قرار دهید . یک سایه تیره تر در زیر آیپد بکشید برای این کار از یک براش بزرگ نرم استفاده کنید شفافیت آن را به 50% برسانید .

قدم 33 :

یک سایه ی بزرگتر و ملایم تر بکشید شفافیت آن را به 5% برسانید .

قدم 34 :

حالا ، براش خودتان را به سایز کوچکتری تنظیم کنید ولی سختی آن را به 0% برسانید تا نرمی آن بهتر کار کنید . یک سایه تیره تر درست در زیر آیپد بکشید . شفافیت آن را به 50% برسانید .

قدم 35 :

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

قدم 36 :

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

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

قدم 37 : نتیجه نهایی

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

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

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

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

منبع : hongkiat

/a

دیدگاه خود را وارد کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *