طراحی ui در فتوشاپ

saman6633

New Member
با سلام و تبریک سال جدید
میخواستم این باتن رو تو ui اپ استفاده کنم و ریسپاندیگش کنم ولی هرچی فک می کنم هیچ ایده ای نمیاد برای 2 تا حالت دیگ اش منظورم Hoverd و Pressed اشه که معمولا تو ui kit های برنامه ، طراحی میشن
میشه یکی بهم ایده و کمک کنه که چجوری طراحیش کنم
mnu_info.png

چیزی که خودم تو فتوشاپ طراحی کردم هم شکل زیره
1.png

تا اونجاییکه من میدونم باید یه چیزهایی دقیقا برعکس بشه برای اینکه حسه کلیک شدن یک دکمه واقعی به یوزر دست بده حالا میشه به من بگید چه جوری این کارو انجام بدم !؟ ایده هایی که به ذهنم خودم اومده اولش این بود که کاملا کریستالو سیا و سفید کنم بد برایه هاوردش Hover یا لمسش روشن بشه ینی رنگشو بهمش بدم بعد برا پریسش رنگ گرادیانت اصلی رو reverse کردم که اصن خوب از آب در نیومد میشه یکی یک مقدار اطلاعات بهم بده متاسفانه خودم تخصصم طراحی ui نیست ولی تا حدودی فتوشاپ بلدم اگر کمکم کنید و ایده شو بدید شاید حدودا 40 50 درصدشو چیزی که بهم میدید رو انجام بدم با سپاس

این هم یه سمپل برای UI KIT که خیلی ساده اس و توش کریستال و اینجور چیزا نداره
UI_dark_Kit_psd.jpg
 

saman6633

New Member
واقعا نمی دونم سوالم خیلی ساده ست که جوالش بدیهی باشه و نیاز به پاسخ نداشته باشه و یا سطح دوستان گرافیست و دیجیتال ارتینگ اونقد ناامید کننده است!!! (امیدوارم به کسی بر نخوره)
 

the_king

مدیرکل انجمن
با سلام و تبریک سال جدید
میخواستم این باتن رو تو ui اپ استفاده کنم و ریسپاندیگش کنم ولی هرچی فک می کنم هیچ ایده ای نمیاد برای 2 تا حالت دیگ اش منظورم Hoverd و Pressed اشه که معمولا تو ui kit های برنامه ، طراحی میشن
میشه یکی بهم ایده و کمک کنه که چجوری طراحیش کنم
mnu_info.png

چیزی که خودم تو فتوشاپ طراحی کردم هم شکل زیره
1.png

تا اونجاییکه من میدونم باید یه چیزهایی دقیقا برعکس بشه برای اینکه حسه کلیک شدن یک دکمه واقعی به یوزر دست بده حالا میشه به من بگید چه جوری این کارو انجام بدم !؟ ایده هایی که به ذهنم خودم اومده اولش این بود که کاملا کریستالو سیا و سفید کنم بد برایه هاوردش Hover یا لمسش روشن بشه ینی رنگشو بهمش بدم بعد برا پریسش رنگ گرادیانت اصلی رو reverse کردم که اصن خوب از آب در نیومد میشه یکی یک مقدار اطلاعات بهم بده متاسفانه خودم تخصصم طراحی ui نیست ولی تا حدودی فتوشاپ بلدم اگر کمکم کنید و ایده شو بدید شاید حدودا 40 50 درصدشو چیزی که بهم میدید رو انجام بدم با سپاس

این هم یه سمپل برای UI KIT که خیلی ساده اس و توش کریستال و اینجور چیزا نداره
UI_dark_Kit_psd.jpg
چیزی که خودتون طراحی کردین برای این از خوب در نیومده که اصول اون حالت glossy رو نداره. تنها جایی که باید لایه نوری روشن با گوشه های شارپ داشته باشه خود لایه glossy بالا است. اون دو ناحیه روشن که زیرش کشیدید نه با سایه مطابقت داره و نه منبع روشنایی.
برای حالت Hover باید تغییر ظاهری رو انتخاب کنید که هم ظاهر آیکون مشخص و واضح بمونه و هم از حالت Pressed متمایز باشه. فرضا یک نور از زیر شیشه glossy پرنورش کنه، یا یک هاله نوری دورش روشن بشه یا رنگ آیکون یا زمینه دکمه به یک رنگ متفاوت و زنده تغییر کنه.
برای حالت Pressed یا باید دکمه فرو رفتنی باشه یا با صرفا با تیره تر شدنش زمینه اش حالت فشرده ایجاد بشه. حقیقتا برای این سبک glossy اون مدل فشرده شدن مناسب نیست و بهتره روی رنگ و تیره و روشن بودنش مانور بدید.
برای ایجاد حالت فرو رفتگی یا آیکون دکمه سرجاش میمونه و فقط سایه اطراف دکمه به داخل افزایش پیدا می کنه که انگار چون عمق دکمه از اطرف بیشتره روی اون سایه افتاده یا خود آیکون دکمه یکی دو پیکسل به سمت پایین (یا مورب پایین چپ) جابجا میشه که مناسب سبک انتخابی شما نیست.
Sample.jpg

نمونه فایل psd طرح :
sample-psd
 

پیوست ها

  • Sample.psd
    1.7 مگایابت · بازدیدها: 2

xaniar_etc

New Member
با سلام و تبریک سال جدید
میخواستم این باتن رو تو ui اپ استفاده کنم و ریسپاندیگش کنم ولی هرچی فک می کنم هیچ ایده ای نمیاد برای 2 تا حالت دیگ اش منظورم Hoverd و Pressed اشه که معمولا تو ui kit های برنامه ، طراحی میشن
میشه یکی بهم ایده و کمک کنه که چجوری طراحیش کنم
mnu_info.png

چیزی که خودم تو فتوشاپ طراحی کردم هم شکل زیره
1.png

تا اونجاییکه من میدونم باید یه چیزهایی دقیقا برعکس بشه برای اینکه حسه کلیک شدن یک دکمه واقعی به یوزر دست بده حالا میشه به من بگید چه جوری این کارو انجام بدم !؟ ایده هایی که به ذهنم خودم اومده اولش این بود که کاملا کریستالو سیا و سفید کنم بد برایه هاوردش Hover یا لمسش روشن بشه ینی رنگشو بهمش بدم بعد برا پریسش رنگ گرادیانت اصلی رو reverse کردم که اصن خوب از آب در نیومد میشه یکی یک مقدار اطلاعات بهم بده متاسفانه خودم تخصصم طراحی ui نیست ولی تا حدودی فتوشاپ بلدم اگر کمکم کنید و ایده شو بدید شاید حدودا 40 50 درصدشو چیزی که بهم میدید رو انجام بدم با سپاس

این هم یه سمپل برای UI KIT که خیلی ساده اس و توش کریستال و اینجور چیزا نداره
UI_dark_Kit_psd.jpg
سلام وعرض ادب
دوست عزیز می تونی از shadow استفاده کنی برای حالت hover که وقتی ماوس رفت روش اانگار دکمه بلند میشه
 

جدیدترین ارسال ها

بالا