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

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

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

منابع مورد نیاز :

برای اینکه بتوانید از این آموزش استفاده کنید به منابع زیر نیاز دارید :

Repeatable Pixel Pattern از  PSDfreemium

قدم اول : کشیدن پشت زمینه

کار را با یک پوشه جدید به اندازه 800×500 پیکسل آغاز کنید . یک گرادیان شعاعی از سفید تا خاکستری بکشید .

قدم 2:

بیایید گرادیان را اضافه کردن Adjustment Layer > Hue/Saturation و کم کردن نور تنظیمات تاریک تر کنیم .

قدم 3:

یک لایه  جدید درست کنید و آن را سفید کنید .بر روی Filter > Noise > Add Noise کلیک کنید . حالت ترکیبی را بر روی Multiply تنظیم کنید .

قدم 4 :

لایه نویز شده را که همین الآن ساختیم ، با فشردن کلید های Ctrl + J دابلیکیت کنید. ابزار جابجایی را فعال کنید و سپس کلید جهتی پایین را فشار دهید و حالا کلید جهتی راست را تا به اندازه 1 پیکسل به سمت پایین و راست حرکت کند . حالا Ctrl + I را فشار دهید تا رنگ آن را وارونه کنید و حالت ترکیبی آن را به Screen تنظیم کنید . حالا در اینجا یک بافت عالی داریم .

قدم 5:

حالا هردوی لایه های نویزی را انتخاب کنید و سپس کلید های Ctrl + G را فشار دهید تا آنها را درون یک گروه قرار دهید . شفافیت آن را به میزان 50%  کاهش دهید .

قدم 6: اساس شکل پخش کننده فیلم :

 

یک مستطیل به کد رنگ #151d25 بکشید .

لایر استایل : Gradient Overlay and Stroke را اضافه کنید .

در اینجا نتیجه این عملیات را مشاهده می کنید .

قدم 7: نوار متن

یک شکل مستطیل در بالای اینترفیس اصلی بکشید . رنگ آن را به #272e36 تنظیم کنید . ما از این مستطیل برای نوار متن استفاده خواهیم کرد .

 

لایر استایل های زیر را اضافه کنید :

Drop Shadow and Gradient Overlay.

 

قدم 8 :

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

قدم 9 :

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

قدم 10 :

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

قدم 11 :

در اینجا آن را به صورت 100% بزرگ شده داریم . همانطور که می توانید مشاهده کنید ، برجستگی خیلی لطیف است . ولی رابط کاربری خیلی صاف نیست دیگر .

قدم 12 :دکمه های کوچک کردن ، بزرگ کردن و بستن

یک مستطیل در قسمت راست نوار متن بکشید . از رنگ #5c3936 استفاده کنید . این پشت زمینه دکمه بستن است .

و لایر استایل : Gradient Overlay استفاده کنید

 

قدم 13:

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

 

لایر استایل Outer Glow را اضافه کنید .

 

این نتیجه کاری است که بعد از اضافه کردن Outer Glow و علامت ضربدر داریم .

قدم 14:

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

قدم 15:

خوب اجازه بدهید یک فاصله میان هرکدام از علامت ها بگذاریم . یک لایه جدید درست کنید و یک خط به اندازه 1 پیکسل با رنگ مشکی درست کنید و شفافیت آن را به 30% کاهش دهید . سپس یک خط یک دیگر مشکی بکشید و باز شفافیت لایه آن را به 70% برسانید . یک بار دیگر و این بار یک خط 1 پیکسلی سفید  با شفافیت 5% بکشید .

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

قدم 16 :

آن خطوط را با انتخاب کردن و فشردن کلید های کنترل +G ، در یک گروه لایه  جدا گانه قرار دهید . کلید Alt  را نگه دارید و گروه را بکشید تا دابلیکیت شود . بین هر علامتی خطوط را قرار دهید .

قدم 17 :

عنوان فیلم را در قسمت نوار عنوان اضافه کنید . لایر استایل های Drop Shadow و Gradient Overlay را اضافه کنید .این لایر استایل ها یک افکت متالیک به متن می دهند .

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

یک مستطیل برای ناحیه صفحه نمایش بکشید . از رنگ کد #272e36 برای آن استفاده کنید .

لایر استایل های Drop Shadow و Gradient Overlay را اضافه کنید .

قدم 19 :

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

قدم 20 :

یک بار دیگر ، یک برجستگی در بالای ناحیه صفحه نمایش بکشید .

قدم 21:

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

لایر استایل های : Drop Shadow و Inner Shadow و Gradient Overlay را اعمال کنید .

نتیجه این تنظمات را می توانید در اینجا مشاهده فرمایید .

قدم 22: نوار  پیشرفت

یک مستطیل با کد رنگ #272e36 در زیر صفحه نمایش بکشید .

 

لایر استایل های Drop Shadow و Gradient Overlay را اضافه کنید .

قدم 23:

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

قدم 24 :

در اینجا کار را به اندازه 100% زوم کرده ایم و شما می توانید نتایج کار را تا اینجا بهتر مشاهده کنید .

قدم 25:

یک مستطیل با کد رنگ #313131 بکشید .

لایر استایل های : Inner Shadow و Inner Glow و Gradient Overlay را اضافه کنید .

و این نتیجه کار می شود :

قدم 26:

مستطیلی را که همین الان کشیده ایم با فشردن کلید های Ctrl + J  دابلیکیت کنید . رنگ آن را به کد #357ffa تبدیل کنید .

تنظیمات لایر استایل را تغییر دهید .

 

از این تنظیمات استفاده کنید و به چیزی که الان اینجاست خواهید رسید .

قدم 27 :

ابزار Direct Selection را فعال کنید و سپس نقاطی را در گوشه سمت چپ انتخاب کنید . کلید  Shift  و جهتی چپ را برای چندین مرتبه فشار دهید تا نقاطی را که انتخاب کرده اید جابجا شود .

قدم 28 :

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

قدم 29 :

یک مستطیل مشکی که برای پوشش پیشرفت است بکشید و شفافیت آن را به 10% کاهش دهید .

 

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

قدم 30 :

یک برجستگی در نوار پیشرفت و حرکت با قلم یک پیکسلی بکشید .

 

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

 

قدم 31 : دکمه ها

خوب بهتر است  به سراغ دکمه ها برویم . یک مستطیل دیگر با کد رنگ #272e36 بکشید . این بار از آن به عنوان دکمه های کنترلی استفاده خواهیم کرد.

لایر استایل های Drop Shadow و Gradient Overlay را اضافه کنید .

قدم 32:

یک سری برجستگی هایی به قسمت چپ مستطیل اضافه کنید .

قدم 33:

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

قدم 34: سایه ها

کلید کنترل را بگیرید و بر روی اشکال پایه اینترفیس کلیک کنید تا یک سلکشن جدید بر اساس شکل ها درست کنید. یک لایه جدید درست کنید و آن را در پشت پخش کننده فیلم قرار دهید . سلکشن را با رنگ مشکی پر کنید . سلکشن را با فشردن کلید های Ctrl + D حذف کنید . به کمک اجرای Gaussian Blur و کلیک کردن Filter > Blur > Gaussian Blur سایه ها را ملایم تر کنید .

قدم 35: اضافه کردن انعکاس :

شکل پایه ای اینترفیس را دابلیکیت کنید و Fill  آن را به 0% برسانید . آن را در بالای صفحه نمایش قرار دهید . یک شکل پلی گون در قسمت سمت چپ مستطیل بکشید و حالت آن را به subtract تنظیم کنید

لایر استایل ها Gradient Overlay را اضافه کنید .

 

قدم 36: الگوی ظریف بر روی صفحه نمایش

در حال حاضر اسکرین خیلی صاف و بدون ظرافت به نظر می رسد . ناحیه اصلی اسکرین را انتخاب کنید و آن را با هر رنگی که دوست داشتید پر کنید . Fill را به 0% برسانید.

 

می توانید از سایت PSDfreemium یک الگوی پیکسلی خوب بگیرید . می توانید از تنظیمات موجود در استایل لایه ها مثل : Pattern Overlay استفاده کنید .

 

اطمینان حاصل کنید که الگو بسیار ظریف و شفافیت آن در حد 1% باشد .

 

قدم 37:

در انتها ابزار قلم را فعال کنید . سختی قلم را به 0% برسانید و شفافیت آن را بسیار کم کنید چیزی در حد 2 یا 3 % کافی است . یک درخشش ملایم در مرکز اسکرین قرار دهید .

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

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

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

منبع : hongkiat