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

شروع موضوع توسط saman6633 ‏28 مارس 2018 در انجمن برنامه‌ها و مسائل مربوط به گرافیک پیکسلی

  1. saman6633

    saman6633 New Member

    ارسال‌ها:
    2
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    با سلام و تبریک سال جدید
    میخواستم این باتن رو تو ui اپ استفاده کنم و ریسپاندیگش کنم ولی هرچی فک می کنم هیچ ایده ای نمیاد برای 2 تا حالت دیگ اش منظورم Hoverd و Pressed اشه که معمولا تو ui kit های برنامه ، طراحی میشن
    میشه یکی بهم ایده و کمک کنه که چجوری طراحیش کنم
    [​IMG]
    چیزی که خودم تو فتوشاپ طراحی کردم هم شکل زیره
    [​IMG]
    تا اونجاییکه من میدونم باید یه چیزهایی دقیقا برعکس بشه برای اینکه حسه کلیک شدن یک دکمه واقعی به یوزر دست بده حالا میشه به من بگید چه جوری این کارو انجام بدم !؟ ایده هایی که به ذهنم خودم اومده اولش این بود که کاملا کریستالو سیا و سفید کنم بد برایه هاوردش Hover یا لمسش روشن بشه ینی رنگشو بهمش بدم بعد برا پریسش رنگ گرادیانت اصلی رو reverse کردم که اصن خوب از آب در نیومد میشه یکی یک مقدار اطلاعات بهم بده متاسفانه خودم تخصصم طراحی ui نیست ولی تا حدودی فتوشاپ بلدم اگر کمکم کنید و ایده شو بدید شاید حدودا 40 50 درصدشو چیزی که بهم میدید رو انجام بدم با سپاس

    این هم یه سمپل برای UI KIT که خیلی ساده اس و توش کریستال و اینجور چیزا نداره
    [​IMG]
     
    نوشته شده توسط saman6633 در ‏28 مارس 2018
  2. saman6633

    saman6633 New Member

    ارسال‌ها:
    2
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    واقعا نمی دونم سوالم خیلی ساده ست که جوالش بدیهی باشه و نیاز به پاسخ نداشته باشه و یا سطح دوستان گرافیست و دیجیتال ارتینگ اونقد ناامید کننده است!!! (امیدوارم به کسی بر نخوره)
     
    نوشته شده توسط saman6633 در ‏28 مارس 2018
  3. the_king

    the_king مدیرکل انجمن

    ارسال‌ها:
    10,823
    تشکر شده:
    10,885
    امتیاز دستاورد:
    113
    چیزی که خودتون طراحی کردین برای این از خوب در نیومده که اصول اون حالت glossy رو نداره. تنها جایی که باید لایه نوری روشن با گوشه های شارپ داشته باشه خود لایه glossy بالا است. اون دو ناحیه روشن که زیرش کشیدید نه با سایه مطابقت داره و نه منبع روشنایی.
    برای حالت Hover باید تغییر ظاهری رو انتخاب کنید که هم ظاهر آیکون مشخص و واضح بمونه و هم از حالت Pressed متمایز باشه. فرضا یک نور از زیر شیشه glossy پرنورش کنه، یا یک هاله نوری دورش روشن بشه یا رنگ آیکون یا زمینه دکمه به یک رنگ متفاوت و زنده تغییر کنه.
    برای حالت Pressed یا باید دکمه فرو رفتنی باشه یا با صرفا با تیره تر شدنش زمینه اش حالت فشرده ایجاد بشه. حقیقتا برای این سبک glossy اون مدل فشرده شدن مناسب نیست و بهتره روی رنگ و تیره و روشن بودنش مانور بدید.
    برای ایجاد حالت فرو رفتگی یا آیکون دکمه سرجاش میمونه و فقط سایه اطراف دکمه به داخل افزایش پیدا می کنه که انگار چون عمق دکمه از اطرف بیشتره روی اون سایه افتاده یا خود آیکون دکمه یکی دو پیکسل به سمت پایین (یا مورب پایین چپ) جابجا میشه که مناسب سبک انتخابی شما نیست.
    [​IMG]
    نمونه فایل psd طرح :
    sample-psd
     

    پیوست ها:

    • Sample.psd
      اندازه فایل:
      1.7 MB
      نمایش ها:
      2
    نوشته شده توسط the_king در ‏29 مارس 2018
    SajjadKhati از این پست تشکر کرده است.
  4. xaniar_etc

    xaniar_etc New Member

    ارسال‌ها:
    4
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    سلام وعرض ادب
    دوست عزیز می تونی از shadow استفاده کنی برای حالت hover که وقتی ماوس رفت روش اانگار دکمه بلند میشه
     
    نوشته شده توسط xaniar_etc در ‏7 آوریل 2018
  5. iranlaw

    iranlaw New Member

    ارسال‌ها:
    2
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    سلام دوستان شما یه منبع خوب برای hover دارید
     
    نوشته شده توسط iranlaw در ‏22 اکتبر 2018

به اشتراک بگذارید