• >>
    • 
    • قیمت : 8000 تومان
    •  
    • قیمت : 10000 تومان
    • 
    • قیمت : 5000 تومان
    • 
    • قیمت : 5000 تومان
    • 
    • قیمت : 5000 تومان
    • 
    • قیمت : 5000 تومان
    • 
    • قیمت : 5000 تومان
    • 
    • قیمت : 5000 تومان
  • <<
آخرین اخبار



آموزش طراحی یک صفحه ورودی سایت

اول از همه فوتوشاپ رو باز کرده و یک فایل ۶۰۰ × ۶۰۰ با رنگ زمینه ۳۳۳۳۳۳# درست کنید.
با استفاده از ابزار Ellipse یک دایره بکشید:
1
.
سپس چنین تنظیماتی رو بر لایه اعمال کنید(باید بر روی لایه راست کلیک کرده و Blending Option را بزنید
2

3

4
.
لایه را انتخاب کرده به منوی Edit > Transform > Wrap بروید و مانند شکل از منوی باز شونده Shell Upper را انتخاب کنید:

5

.
بعد از زدن دکمه Enter, چنین تصویری باید داشته باشید:
6

.

از لایر خود یک کپی گرفته و آن را تغییر سایز دهید(Ctrl + T):
7
.
سپس با استفاده از دکمه ها جهت دار لایر دومی را بر وسط لایر اولی خود تنظیم کنید:
8
.
برای لایر دومی, این تنظیمات رو اعمال کنید:

9
10

11

12

13

14

15

.

و نتیجه:
16
.
حال با استفاده از ابزار Ellipse یک دایره دیگه درست کنید.
17
.
اگر توجه کرده باشید من تنظیمات مشابه لایر اولی رو برای این دایره اعمال کردم:
2

3

4
.
در حالیکه این لایر در حالت انتخاب هست به منوی Edit > Transform > Wrap رفته و Inflate را انتخاب نمایید:
18
.
فراموش نکنید که باید Enter را بزنید.
.
از لایر یک کپی گرفته و آن را تغییر سایز داده و در مرکز اولی قرار دهید:
19
.
حالا چنین تنظیماتی برای لایر بالایی اعمال کنید:
20

21

22

23
.
نتیجه:
24
.
حالا متن مورد نظر خود را اضافه کنید:
25
.
با استفاده از ابزار Line در حالیکه اندازه اون رو به ۱PX تغییر داده اید, یک خط معمولی مانند شکل بکشید:
26
.
سپس در حالیکه خط شما در حالت انتخاب قرار دارد, بر روی دکمه Add Layer Mask کلیک کنید:
27
.
ابزار Gradient را انتخاب کرده و آن را بر روی Reflected Gradient قرار دهید:
28
.
حال از ابتدای فلشی که در تصویر مبیبنید تا انتهای آن خطی بکشید:
29
.
یک کپی دیگر از این لایه گرفته و آن را جایی مانند شکل زیر قرار دهید:
30
.
اکنون همه لایه ها را به استثناء لایه پشت زمینه, انتخاب و سپس همه به طرف دکمه Create New Layer بکشید. با این کار از همه لایه ها یک کپی گرفته میشود:
31
.
دکمه های Ctrl + E را برای ترکیب کردن لایه های کپی گرفته شده بزنید و سپس به منوی Edit > Transform > Flip Vertical را بزنید:
32
.
با استفاده از دکمه های جهت دار صفحه کلید, آن را در جایی که در تصویر میبینید قرار دهید. ما از این لایه برای بازتاب تصویر اصلی (یا Reflect) استفاده میکنیم:
33

.
پس از آن در حالیکه لایه بازتاب شده هنوز در حالت انتخاب قرار دارد, بر روی دکمه Add Layer Mask کلیک کنید:
34
.
برای بار دوم, ابزار Gradient را انتخاب کرده و خطی عمودی (در جهت فلش آبی رنگ) بکشید:
35
.
حال مقدار Opacity این لایه را به ۲۰ کاهش دهید:
36
.
تصویر نهایی:
37



یک دیدگاه برای : آموزش طراحی یک صفحه ورودی سایت

  1. سید وحید می‌گه:

    با تشکر از زحمات شما مطلب آموزشی که در باره طراحی ورود به سایت گذاشته اید خیلی خوب بود لطفا نحوه طراحی قلب های به همراه طراحی منو ها را نیز در آموزش های خود داشته باشید

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>