آموزش طراحی گوشی  HTC در فتوشاپ

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

پیش نمایشی از تصویر نهایی

مرحله ۱ :

یک فایل جدید در فتوشاپ با ابعاد ۲۳۶۲px x 2362 px و رزولوشن ۳۰۰ px / inch ایجاد نمایید.

با ابزار  Rounded Rectangle Tool (U) یک مستطیل با رنگ #۲۴۲۵۲۷ در مرکز صفحه بکشید. لایه را به هیچ عنوان ترکیب و یا rasterize نکنید.

با استفاده از Add Anchor Point Tool در قسمت پایین مستطیل و در مرکز آن یک نقطه اضافه کنید. نقطه را انتخاب و با استفاده از Direct Selection Tool (A)  مانند تصویر زیر چند میلیمتر آن را پایین تر بکشید.

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

 

از لایه ایجاد شده “Duplicate ” بگیرید و نام آن را “Silver“ بگذارید و با رنگ #۵a5a5c آن را پر کنید. لایه را به بالاترین سطح در بین لایه ها بکشید و آن را rasterize کنید.

برای زیباتر کردن افکت نقره ای به مسیر Filter > Noise رفته و گزینه ها را به این صورت تنظیم کنید. Noise: Amount: 20%, Distribution: Uniform, Monochromatic

بار دیگر لایه Silver را انتخاب کرده و  Create Clipping Mask را انتخاب نمایید.بر روی لایه راست کلیک کرده و گزینه Blending Options را انتخاب و افکت drop shadow را با تنظیمات دلخواه اضافه نمایید.

مرحله ۲ :

لایه اول را دوباره Duplicate  بگیرید(Ctrl+J) و آن را در بالای لایه نقره ای قرار دهید. افکت Inner Glow را با تنظیمات (Blend Mode: Normal, Opacity 41%, Color # 000000, و Chock 14% Size 92 px) اضافه نمایید. fill را بر روی ۰ تنظیم کنید.

از لایه کپی بگیرید و ابعاد آن را کمی کوچکتر کنید.Fill: 0 و Opacity: 54% قرار دهید.

یک Layer Mask  اضافه کنید و با gradient از بالا تا پایین آن را بکشید. این کار باعث ایجاد افکت سایه و نور می شود.

 مرحله ۳ :

لایه جدید ایجاد کنید و با ابزار Ellipse Tool (U) یک بیضی با رنگ # ffffff ایجاد کنید. لایه را Rasterize  کنید و به مسیر  Filter > Blur > Gaussian Blur بروید و Radius را بر روی ۳۲ px و Opacity را روی  ۲۵% تنظیم کنید.

مرحله ۴ :

 در این مرحله برای محل اسپیکر شکاف هایی ایجاد کنید با استفاده از ابزار Rounded Rectangle tool (U)  اولین شکاف را ایجاد کنید.

Radius: 0.5 cm  و با رنگ # ۶d6e71 پر کنید.

قبل از اینکه افکتی بر روی لایه اسپیکر ها اضافه کنید یک پترن pattern ایجاد کنید و سپس یک صفحه جدید new document 2x2cm باز کنید.

با ابزار Ellipse Tool (U) و نگه داشتن کلید Shift یک دایره مشکی در صفحه ایجاد کنید. برای افزودن یک پترن به مسیر  Edit – Define Pattern  بروید.

 

به  شکافی که در لایه “HTC Smartphone”  طراحی کرده بودید برگردید و تنظیمات زیر را روی آن اعمال کنید.

از این لایه کپی بگیرید و با فاصله ۰٫۵ cm از هم قرار دهید.

 اولین قسمت از طراحی ما به پایان رسید، همه ی لایه ها را  از مسیر Layer – Group Layers با نام Base گروه  کنید .

مرحله ۵ :

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

یک دایره کوچک در قسمت پایین  HTC ایجاد کنید. با کمک ابزار Ellipse tool (U) یک دایره کوچک سفید ایجاد کنید و استایل های زیر را روی آن ایجاد کنید.

 

برای ایجاد برجستگی یک دایره کوچک دیگر داخل دایره قبلی ایجاد کنید. از دایره کوچک کپی بگیرید. fill را ۰ قرار دهید و دوباره از دایره کپی بگیرید تا در آخر شبیه تصویر زیر بدست آید.  

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

 

لایه جدید ایجاد کنید و با ابزار  Polygonal Lasso Tool (L) یک مثلث ایجاد کنید اینکه دقیقا مثلث باشد اصلا مهم نیست.

در قسمت Gradient Editor  بر روی کار سایه ایجاد کنید. Reflected Gradient را انتخاب کنید و و از مرکز مثلث سایه را  ایجاد کنید.

 

برای دومین گریدنت از Linear gradient استفاده کنید. با زاویه ای که از مرکز دایره شروع شود . برای برداشتن خطوط Ctrl+D را بزنید. لایه ای را که با گریدنت ایجاد کرده اید را انتخاب و از مسیر Filter – Blur – Blur Gaussian – radius: 3.3 pixels فیلتر جدید را اضافه کنید.

اگر گریدنت از دایره بیرون زد با یک پاک کن کوچک و نرم آن را پاک نمایید. از این لایه کپی بگیرید و در سمت روبروی آن بچرخانید.

یک دایره سیاه با Ellipse Tool (U) در مرکز سنسور ایجاد کنید و استایل زیر را به آن اضافه کنید.

برای اینکه به سنسور حس واقعی بودن را بدهیم از بازتاب نور استفاده می کنیم. برای این کار  Ellipse tool (U) انتخاب کرده و یک بیضی سفید رنگ کوچک ایجاد کنید.

با Direct Selection Tool (A) کمی قسمت پایین بیضی را به سمت بالا بکشید  تا به شکل زیر برسید. سپس آن را در زاویه مناسب نسبت به مرکز سنسور بچرخانید.

لایه را Rasterize کنید و بر روی آن Gaussian Blur Radius: 1.5 px را قرار دهید

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

مرحله ۶:

حالا به صفحه نمایش برمیگردیم. از روی لایه اولیه صفحه نمایش یک کپی بگیرید. لایه را بالای بقیه قرار دهید. fill را روی # ۰۰۰۰۰۰  قرار دهید. لایه را تغییر اندازه دهید و افکت Inner Glow را به آن اضافه نمایید:

برای لوگو از فونت HURTMOLD استفاده کنید. این فونت را می توانید از لینک زیر دانلود کنید .

Download 25.36 kB

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

با فونت قبلی که دانلود کردید کلمه menu را تایپ کنید.

از قسمت Costom Shape Tool (U)  فلش را اضافه کنید (arrow 18). به مسیر Edit – Trasform – Flip Horizontal رفته و لایه را Rasterize کنید و قسمت پایین فلش را برای رسیدن به فلش مورد نظر پاک کنید. اسم لایه را Freccia بزاید.

آخرین قسمت ، طراحی شکل جستجو است. با Ellipse Tool (U)  یک دایره رسم کنید. به لایه Fill 0  بدهید و stroke را به ۳pxو رنگ # ۶d6e71 اضافه کنید. با ابزار Rectangle Tool (U) دسته ذره بین را با زاویه ۴۵ درجه طراحی کنید. این دو لایه را در یک گروه به نام Lente قرار دهید.

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

 

مرحله ۷

برای ساخت صفحه اصلی موبایل لایه جدیدی با نام Sfumatura  ایجاد کنید . و با ابزار  Marquet With Rectangular Tool (M)  یک مستطیل بکشید. و مستطیل انتخابی را با گریدنت Spectrum پر کنید. Gradient Tool (G)  را از قسمت چپ و پایین مستطیل به سمت بالا و قسمت راست مستطیل بکشید.

مقداری حباب ایجاد کنید. لایه جدیدی به نام Bolle  ایجاد کنید و با ابزار Ellipse Tool (U) دایره سفید رنگ را اضافه کنید. blend mode را به Soft Light و opacity 60% تغییر دهید. لایه را Rasterize کنید. برای آنکه به صورت هاله در بیاید به مسیر Filter – Blur – Gaussian Blur – Radius 9.3 pixels بروید.

چندین بار از حباب کپی بگیرید و با سایز های مختلف و کم و زیاد کردن opacity بر روی صفحه قرار دهید. توجه کنید که حباب ها باید فقط در همان محدوده گریدنت باشد. لایه گریدنت را انتخاب کنید Selection – Load Selection. Ctrl +  Maiusc + I و معکوس کنید .

تمامی لایه های Bolle را انتخاب کنید و قسمت هایی از حباب ها که از صفحه نمایش بیرون زده اند را پاک نمایید. لایه هارا در گروهی به نام “bubble” قرار دهید

 مرحله ۸

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

لایه جدیدی را ایجاد کرده و با ابزار Rectangle Tool (U) مستطیلی عریض تر از صفحه گریدنت که ایجاد کرده بودید بکشید. سپس Ctrl + T را برای خم کردن مستطیل به پایین فشار دهید.

دو مستطیل ایجاد کرده و موقتا یکی از آن ها را مخفی نمایید. هر دو لایه را Rasterize و مانند تصویر پایین جا به جا نمایید.

به مسیر Filter – Blur – Gaussian Blur – Radius 10 px بروید . برای هر دو لایه blend mode را روی  Multiplyو  opacity 80% قرار دهید.  لایه بالایی را مجددا از حالت مخفی در بیاورید.

در لایه پایینی، با ابزار “Direct Selection Tool (A)” دو قسمت بالایی را انتخاب نمایید و به سمت بالا کمی بکشید تا ارتفا دوبرابر قبل شود.

برای هر دو لایه رنگ را از سیاه به # ۶d6e71 تغییر دهید.

با ابزار Ellypse Tool (U) دایره کوچکی با رنگ   # ۶d6e71 ایجاد کنید و Inner Shadow را به آن اضافه کنید. از لایه کپی بگیرید  لایه ها را تنظیم کنید تا نتیجه ای مشابه عکس زیر را به دست آورید.

وقتی که دایره های سمت چپ را کامل انجام دادید آن را به نام “Balls Sx” گروه کرده، از آن کپی بگیرید و در سمت مقابل مانند تصویر پایین قرار دهید.

با استفاده از ابزار Text tool (T) تاریخ را به رنگ سفید بنویسید. می تونید از فونت Calibri Regular و با سایز ۹٫۵ pt استفاده کنید.

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

با فونت  Calibri و سایز ۳۳ pt ساعت را در وسط مستطیل اضافه کنید و در بالای مستطیل می توانید نام اپراتور را اضافه کنید.

 

لایه ها را با نام Schermo Basso با یکدیگر گروه کنید.

مرحله ۹

به قسمت طراحی جزئیات بالای صفحه می رسیم.

با ابزار Rectangle Tool (U) مستطیلی باریک بکشید و با رنگ # ffffff آن را پر کنید و گریدنت را به آن اضافه کنید.

در ادامه، جزئیات بیشتر ی مانند آیکون باطری ، زمان و ….را باید به کار اضافه کنید.

زمان / ساعت : برای اضافه کردن زمان  از فونت Calibri regular با سایز  ۸ pt و رنگ # ffffff استفاده کنید و از گزینه های layer styles استفاده نکنید.

باطری : باطری را می توانید با استفاده از دو مستطیل و ابزار  Rounded Rectangle Tool (U) بکشید. Radius 0.01 cm تنظیم کنید و آنها را با یکدیگر merged کنید.

با ابزار Rectangle Tool (U) مستطیلی دیگر برای نشان دادن مقدار باطری یا شارژ باقی مانده گوشی بکشید ، رنگ # ۷fff00 انتخاب کنید و Gradient Overlay را به کار اضافه کنید.

و در آخر طراحی علامت آنتن مانده که به کار اضافه کنید. با ابزار Rectangle Tool (U) چهار مستطیل ایجاد کنید و با رنگ # ffffff  آنها را پر کنید. و Gradient Overlay را به کار اضافه کنید.

لایه ها را در گروهی به نام “Schermo Alto“ قرار دهید

 

مرحله ۱۰ :

آخرین کاری که باید انجام دهید آن است که صفحه نمایش موبایل باید کمی حالت عمیق داشته باشد. با کمک ابزار ectangular Tool (U) مستطیل بزرگی مانند پس زمینه ای که از قبل ایجاد کرده بودید بکشید. لایه پایینی را بر روی fill  ۰ قرار دهید و استایل زیر را به آن اضافه نمایید:

مرحله ۱۱ :

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

با ابزار Rounded Rectangle Tool (U)  و (radius: 0.1 cm) یک مستطیل بسیار باریک با رنگ # ۰۰۰۰۰۰ بکشید و در کنار گوشی قرار دهید. شبیه همین کار را برای ایجاد دکمه بالای گوشی انجام دهید اما باید کوچکتر باشد.

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