Loading...



  • magbot
    magbot
    سه شنبه 1 مرداد 1398 - 01:15

    نحوه طراحی یک رابط کاربر در فتوشاپ (16 بازدید)


    نحوه طراحی یک رابط کاربر در فتوشاپ
    آموزش طراحی سایت
    ما بر روی ایجاد یک نوار لغزنده برای "فیلتر" کردن و یک دکمه تماس تمرکز خواهیم کرد. سعی خواهیم کرد که با استفاده از چند تن آبی با چند رنگ خاکستری، کنتراست رنگی را به دست آوریم.
    همچنین با اضافه کردن جزئیات کوچک، کیفیت کلی و ظاهر رابط کاربری را بهبود می بخشیم. این آموزش برای طراحان در تمام سطوح مناسب است، مخصوصا برای مبتدیان و کاربران سطح متوسط با زمان تقریبی 20 تا 40 دقیقه طراحی را میتوانند اتمام کنند. step-11.png
    step-2.png
    شروع ایجاد این رابط کاربر با ایجاد یک سند جدید: 900px width؛ ارتفاع 500px
    step-4.png
    با استفاده از ابزار مربع گرد (U) یک مستطیل سفید و گرد ایجاد کنید.ارتفاع 310 پیکسل عرض و 160 پیکسل است. بعضی از سایه ها را به آن اعمال کنید، همانطور که در تصویر نشان داده شده است.
    step-5.png
    سایه داخلی سفید را اضافه کنید.
    step-6.png
    درخشش بیرونی ملایم و سایه کم، یک سایه زیبا در اطراف شکل ایجاد می کند.
    step-7.png
    stroke
    را به شکل اضافه کنید. یک رنگ خاکستری نازک (# b2b0b0). این مستطیل "پایه" خواهد بود که برای لایه های بعدی روی آن قرار می گیرد .
    step-8.png
    یک شکل مستطیلی جدید ایجاد کنید، باید عرض و ارتفاع آن 10 پیکسل بیشتر باشد. اطمینان حاصل کنید که مستطیل جدید دقیقا بر روی قسمت بالای قسمت قبلی قرار دارد و سپس سایه ای سیاه به آن اعمال می کند.
    حالت Blend Mode را به: Multiply، Opacity تا 25٪، Distance to 1، Spread و Size را به 0 تغییر دهید. این لایه را کپی کنید و سپس 2 پیکسل حرکت دهید. آخرین لایه را یک بار دیگر کپی کنید و آن را نیز 2 پیکسل بالا ببرید. در حال حاضر شما یک "پشته" خوب از مستطیل های طراحی شده بر روی یک دیگر دارید.
    step-9.png
    وقت آن است که یک شکل جدید ایجاد کنیم و با رنگ خاکستری رنگ کنیم، دوباره با استفاده از ابزار مستطیل گرد (U)
    این شکل پایه لغزان ما خواهد بود. برخی از شیوه های شیب گرادیان را همانطور که در شکل نشان داده شده اعمال کنید. من این رنگ نور مونو را انتخاب کرده ام چون کاملا با رنگ آبی و خاکستری متضاد است.
    step-10.png
    stroke را با رنگ کمی تیره تر اعمال کنید که عبارت است از: # c4b8b5
    step-111.png
    یک مربع ساده 12x12 پیکسل ایجاد کنید و آن را در نوار لغزنده قرار دهید.
    step-12.png
    step-13.png
    step-14.png
    step-15.png
    step-16.png
    step-17.png
    step-18.png
    step-19.png
    step-20.png
    step-21.png
    step-22.png
    step-23.png
    step-24.png
    step-25.png
    step-26.png
    step-27.png
    step-28.png
    مقالات مرتبط
    20-%D8%A7%D8%AB%D8%B1-%D9%87%D9%86%D8%B1%DB%8C-%D8%B4%DA%AF%D9%81%D8%AA-%D8%A7%D9%86%DA%AF%DB%8C%D8%B2-%D8%B9%DA%A9%D8%B3-%D8%A8%D8%B1%D8%AF%D8%A7%D8%B1%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%81%D8%AA%D9%88%D8%B4%D8%A7%D9%BE-Adobe-Photoshop.jpg
    20 نمونه آموزشی برای ویرایش عکس در فتوشاپ
    %DA%86%DA%AF%D9%88%D9%86%D9%87-%D9%85%DB%8C-%D8%AA%D9%88%D8%A7%D9%86-%D8%A2%DA%AF%D9%87%DB%8C-%D8%A8%D9%86%D8%B1-%D8%B1%D8%A7-%D8%AF%D8%B1-%D9%81%D8%AA%D9%88%D8%B4%D8%A7%D9%BE-Adobe-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%DA%A9%D8%B1%D8%AF.jpg
    چگونه می توان آگهی بنر را در فتوشاپ Adobe ایجاد کرد
    %DA%86%DA%AF%D9%88%D9%86%D9%87-%DB%8C%DA%A9-%D9%82%D8%A7%D9%84%D8%A8-%D8%AE%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%BE%D8%A7%D8%B3%D8%AE%DA%AF%D9%88-%D8%A8%D8%A7-%D9%BE%D8%B1%D8%B3-%D9%88-%D8%AC%D9%88%D9%87%D8%A7%DB%8C-%D8%B1%D8%B3%D8%A7%D9%86%D9%87-%D8%A7%DB%8C-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%DA%A9%D9%86%DB%8C%D9%85.jpg
    اصول طراحی قالب خبرنامه ایمیلی همراه با مثال