홈페이지 » 포토샵 » Photoshop Create Web 2.0 버튼

    Photoshop Create Web 2.0 버튼

    버튼 Photoshop 자습서는 Photoshop 자습서 사이트에서 가장 인기있는 카테고리 중 하나이며 Web 2.0은 이제 매우 뜨거운 주제이므로 웹 2.0 웹 응용 프로그램에 적합한 간단한 버튼을 만들 수 있습니다. 점프 후 튜토리얼.

    약 500px (너비) x 400px (높이)의 빈 캔버스를 만들어 버튼 디자인을 시작하십시오. 새 레이어 호출 만들기 'bg01'. 선택 둥근 사각형 도구, SHIFT를 누른 채로 중앙에 둥근면을 그립니다. 현재 단계에서는 모든 색상이 정상입니다..

    전화 블렌딩 옵션 의 'bg01'다음 스타일을 조정하십시오.

    그림자

    • 불투명도 : 40 %
    • 거리 : 0px
    • 스프레드 : 0 %
    • 크기 : 6px

    그라디언트 오버레이

    • 색상 중지 : 0 %, # d00031
    • 색상 중지 : 100 %, # ff2b5d

    Ctrl 키를 누른 상태에서 'bg01'썸네일을 레이어하여 모양을 선택합니다. 가기 고르다 -> 수정 -> 계약 값 '2px'. 그러면 선택한 영역이 2 픽셀 씩 축소됩니다..

    새 레이어 호출 만들기 'bg02강조 표시된 (축소 한 후) 영역을 색상으로 채 웁니다. 여기 # 000000 검정색을 사용합니다. 'bg02'를 두 번 클릭하여 블렌딩 옵션 다음 스타일을 조정하십시오..

    그라디언트 오버레이

    • 색상 정지 : 0 %, # c6002f
    • 색상 중지 : 100 %, # c6002f

    텍스트를위한 새로운 레이어를 새로 만들고,txt'. 단추의 텍스트를 삽입하십시오. 나는 알파벳을 사용하여 표현할 것입니다. 여기에서 사용하는 글꼴 스타일은 다음과 같습니다.

    • 둥근 Arial Bold
    • 150pt

    텍스트를 결정한 후 'txt'를 두 번 클릭하여 블렌딩 옵션 다음 스타일 조정.

    그림자

    • 불투명도 : 25 %
    • 거리 : 0px
    • 스프레드 : 0 픽셀
    • 크기 : 5px

    내부 그림자

    • 불투명도 : 10 %
    • 거리 : 0px
    • 초크 : 0
    • 크기 : 10px

    베벨 엠 보스

    • 깊이 : 1px
    • 방향 : 아래로
    • 크기 : 0px
    • Softten : 0px
    • 하이라이트 모드 불투명도 : 32 %
    • 그림자 모드 불투명도 : 32 %

    그라디언트 오버레이

    • 색상 정지 : 0 % # d2d2d2
    • 색상 중지 : 100 % # f0efef

    버튼이 거의 완료되었습니다. 꼭대기 부분에 약간의 빛을 내자. 보류 CTRL, 왼쪽 클릭 'bg02'레이어 썸네일을 사용하여 외부 모양을 강조 표시합니다. 고르다 Eclipse 마키 도구. 지금 개최 ALT, Eclipse Marquee Tool이 선택된 상태에서 드래그하면 강조 표시된 영역의 아래쪽 절반에서 아래쪽으로 드래그됩니다. 위 이미지 참조.

    상단 부분을 강조 표시하고 Eclipse Marquee Tool을 선택하고 마우스 오른쪽 버튼을 클릭하여 선택합니다. ; 들어가다 15px 반경의 경우.

    새 레이어를 만들고 '불타는 듯한 빛깔강조 표시된 부분을 흰색 [#ffffff]으로 채 웁니다. 이렇게하면 단추 상단에 광선 효과가 추가됩니다. 최종 제품은 아래 이미지와 유사해야합니다..

    튜토리얼 다운로드

    뭔가 더 ...

    믹싱 옵션 'bg01'와'bg02'당신에게 더 재미있는 버튼을 줄 것입니다. 이전에했던 버튼에 대한 또 다른 Photoshop 자습서가 있습니다. - 웹 2.0 용 광택 버튼 만들기

    샘플 다운로드