14단원 Effect 효과Ⅱ

1. 버튼 만들기 1

이번 학습은 버튼 만들기입니다.

특히 요즘 들어 웹 디자인에 대한 관심과 작업이 많은 만큼 포토샵의 활용도 이젠 전자출판 편집의 이미지 작업에서 벗어나 웹 디자인에서 활용범위가 커지고 있습니다.

다양한 사이트를 접하다 보면 여러분들은 마우스를 갖다대고 누르는 버튼이미지를 접하시게 됩니다.

이번 학습은 그런 버튼 이미지를 만들 수 있는 스타일작업을 제공합니다.

자 시작해 보겠습니다.

1. 작업이 시작될 새로운 도큐멘트를 꺼내기 위해 상단 메뉴 바에서 File 에 New 를 클릭합니다.

2. New 메뉴 박스에서 Width 란에 300 pixels 로 지정합니다. Height란에 150 pixels 로 지정합니다.

Ok 버튼을 클릭 합니다.

2. 레이어 팔레트에서 새로운 레이어를 만듭니다.

신규아이콘을 클릭 합니다.

3. 원하는 색상을 고릅니다. 지금은 임의의 색을 지정하겠습니다. 지시하는 곳을 클릭 하세요.

전경색이 골라졌습니다.

4. Edit 메뉴에서 Fill을 선택합니다

5. Fill 대화상자에서 Use 란에  Forground 설정하고 OK 합니다.

6. 전체 도큐멘트 바탕색이 전경색으로 칠해졌습니다.

7. 레이어 팔레트 하단에 Layer Style 아이콘을 클릭합니다.

8. Bevel and Emboss를 선택합니다.

9. 대화상자에서Inner Bevel 이 설정되어있습니다.

Depth 100,  Size 40,  Soften 5를  설정합니다.

OK를 클릭 합니다.

10. 레이어 팔레트에서 새로운 레이어를 만듭니다.

신규아이콘을 클릭 합니다.

11. 새로운 레이어엔 아무런 이미지가 없어서 레이어 스타일을 적용시킬 수가 없으므로 표현하고자 하는 이미지를 칠합니다.

사각 선택 툴을 선택합니다.

도큐멘트에 와서 원하는 크기의 사각형을 만듭니다.

12.  Edit 메뉴에서 Fill을 선택합니다

13. Fill 대화상자에서 Use 란에  Forground 설정하고 OK버튼을 클릭 합니다..

14. 사각형의 선택 영역 안에 전경색이 칠해졌습니다.

15. 화면상의 도큐멘트만 보면 같은 바탕과 같은 색을 넣었기 때문에 잘 알 수가 없을 것입니다.

레이어 1의 눈 아이콘을 클릭 하여 화면에서 잠시 가려봅니다.

바탕의 색이 화면에서 없어지니 이젠 레이어 2에 있는 영역이 어떤 것인지 알 수가 있습니다. 다시 눈 아이콘을 켜서 레이어 1 의 이미지를 봅니다.

16. 화면에서 깜박이는 선택영역을 해제합니다. 선택 툴을 화면에서 클릭 하여 선택을 해제합니다.

17. 레이어 팔레트 하단에 Layer Style 아이콘을 클릭 합니다.

18. Bevel and Emboss를 선택합니다.

19. 대화상자를 봅니다.

Style 설정 박스에서 삼각형을 클릭 합니다.

Pillow Emboss를 선택합니다.

Depth 100,  Size 10,  Soften 7를  설정합니다.

OK를 클릭 합니다.

20. 사각형의 입체적인 버튼 스타일 만들어 졌습니다. 이제 위에 텍스트를 얹히겠습니다.

T툴을 선택합니다.

문자를 알아보기 위해 전경색을 흰색으로 설정합니다.

화면에 와서 버튼 이미지 위에 클릭 합니다.

키보드에서 Click 이라고 입력합니다.

21. 입력한 문자를 선택합니다. 클릭드래그 하여 선택하세요.

22. 상단의 T 툴 옵션바에서 Font 스타일을 Times New Roman 체 Bold 로 설정하고,

Size 는 70으로 설정합니다.

23. 이동 툴을 선택합니다.

레이어 팔레트에 텍스트의 레이어가 생성되었습니다.

24. 화면의 텍스트를 이동 툴로 클릭 드래그 하여 위치를 잡습니다.

제시되는 곳으로 드래그 하세요

25. 텍스트의 색상은 알아보기가 힘들어서 흰색으로 사용했지만 이제 스타일과 위치를 잡았으니 기존의 바탕색으로 맞춥니다.

스포이드 툴을 선택합니다.

화면의 버튼 바탕에 와서 스포이드 툴로 클릭 합니다. 제시하는 곳에서 마우스를 클릭 하세요

전경색이 골라졌습니다.

하지만 전경색이 골라졌지만 텍스트는 이미 쓰여졌습니다.

Fill을 넣고 싶어도 텍스트 레이어 층은 이미지 작업의 편집 예를 들면 컬러링, 브러쉬 리터치, 필터 등의 편집을 적용시킬 수가 없습니다. 여기서 잠깐 단축키를 활용해 보겠습니다.

텍스트 층이어도 키보드의 단축키는 적용이 됩니다.

전경색을 넣는 Fill 의 단축키는 키보드에서 Alt Delete입니다.

배경색을 넣는 Fill 의 단축키는 키보드에서 Control Delete입니다.

전경색을 넣어 보겠습니다. 키보드에서 Alt Delete를 누르세요.

화면의 텍스트가 전경색이 들어갔습니다.

26. 레이어 스타일 아이콘을 클릭 합니다.

27. Outer Glow를 선택합니다.

나타난 글로우 대화상자를 봅니다.

Blend Mode를 클릭 합니다. Normal로 맞추어 놓습니다.

컬러를 바꿉니다. 컬러를 설정하는 창을 클릭 합니다.

Elements에서  Technique는  Softer,  Spread는 15,  size 10을 설정합니다.

OK를 클릭 합니다.

텍스트 경계선 바깥쪽에 글로우 효과로 인해 진한 컬러링 효과가 들어갔습니다.

28. 레이어 스타일 아이콘을 클릭 합니다.

Inner Glow를 선택합니다.

Inner Glow 대화 상자를 봅니다.

Blend Mode 는 Screen 으로,. 설정합니다.

Elements에서 Technique 는 Softer ,  choke 15 , size는 6으로 설정합니다.

OK를 클릭 합니다.

텍스트 경계선 안쪽에 글로우 효과로 인해 밝은 컬러링 효과가 들어갔습니다.

이렇게 레이어 스타일을 이용하면 바로 바로 흔히 접하는 입체스타일이나 컬러링 스타일등을 다양하고 쉽게 편집할 수가 있습니다.

첫 번째 버튼 이미지가 완성되었습니다.

2. 버튼 만들기 2

다음은 두 번째 스타일의 버튼을 만들어 보겠습니다.

1. 작업이 시작될 새로운 도큐멘트를 꺼내기 위해 상단 메뉴 바에서 File 에 New 를 클릭 합니다.

2. New 메뉴 박스에서 Width 란에 300 pixels 로 지정합니다. Height 란에 200 pixels로 지정합니다.

Ok 버튼을 클릭 합니다.

2. 레이어 팔레트에서 새로운 레이어를 만듭니다.

신규아이콘을 클릭 합니다.

3. 원형을 정확하게 잡기 위해 자를 꺼내어 안내선을 설정합니다.

View 메뉴에서 Show Ruler를 선택합니다.

화면의 도큐멘트에 상단과 좌측에 자가 부착이 되었습니다.

4. 상단의 자 위치에서 안내선을 하나 꺼냅니다.

지시하는 곳으로 클릭 드래그 하세요.

다음은 왼쪽의 자 위치에서 안내선을 하나 꺼냅니다.

지시하는 곳으로 클릭 드래그 하세요.

5. 툴박스에서 원형의 선택 툴을 선택합니다.

6. Alt 키를 누르고 안내선 교차된 중앙에서부터 원형 선택영역을 만듭니다.

지시하는 곳으로 클릭 드래그 하세요

7. 스와치 팔레트에서 색상을 고릅니다. 전경색이 설정되었습니다.

8. Edit 메뉴에서 Fill을 선택합니다.

9. Fill 대화상자에서 Use 란에  Forground 설정하고 OK버튼을 클릭하세요.

선택을 해제합니다.

10. 레이어 팔레트 하단에 Layer Style 아이콘을 클릭합니다.

18. Bevel and Emboss를 선택합니다.

19. 대화상자를 봅니다.

Style 은 Inner Bevel로 설정하고 Size는 45,  Soften은 10으로 설정합니다. OK를 클릭합니다.

원형의 이미지에 입체효과가 들어갔습니다.

20. 레이어 팔레트에서 새로운 레이어를 만듭니다. 신규아이콘을 클릭 합니다.

21. 툴박스에서 원형의 선택 툴을 이용하여 이번엔 이미 작업된 원형보다 작은 선택영역을 만듭니다.

22. Edit 메뉴에서 Fill을 선택합니다.

9. Fill 대화상자에서 Use 란에  Forground 설정하고 OK버튼을 클릭합니다.

10. 선택을 해제합니다.

11. 이렇게 새롭게 컬러를 넣은 또 다른 원형에도 레이어 스타일에서 입체효과를 줄 것입니다.

하지만 똑같은 스타일을 적용하고자 할 때엔 굳이 다시 메뉴를 들어갈 필요가 없습니다.

레이어 팔레트를 보고 Layer 1에 적용된 레이어 스타일의 Effect 라는 글씨 층을 마우스로 클릭 드래그 하여 레이어 2 층에 갖다 놓습니다.

그러면 레이어 1에 적용된 이펙트의 엠보스 스타일이 레이어2 이미지에도 복사되어 적용됩니다.

12. 레이어2 에 입체감효과가 복사되었습니다.

13. 하지만 둘 다 앞으로 돌출 되어 나와 보입니다.

적용된 레이어 스타일 조정하겠습니다. 레이어 팔레트를 보고 레이어2층의 이펙트라고 써진 문자의 층을 마우스로 두 번 더블 클릭 합니다.

그러면 화면에 스타일 조절 박스가 다시 나타납니다.

Direction을 Down으로 선택합니다. Depth 50, Size 30, Soften 3으로 설정하고 OK를 클릭 합니다.

14. 입체효과가 적용되었습니다.

15. View 메뉴에서 Show 설정으로 들어가 보여지고 있는 Guide를 다시 선택하여 안내선을 화면에서 끕니다.

16. 화면의 안내선이 숨겨졌습니다.

17. T툴을 선택합니다.

18. 화면의 이미지 안으로 와서 클릭 하여 텍스트를 입력합니다.

OK 라고 이미 쓰여진 이미지를 제공하겠습니다.

화면이미지로는 도큐멘트에서 잘 안보이지만 레이어 팔레트를 보시면 텍스트 층의 레이어가 형성되어 있는 것을 보실 수 있습니다. 버튼의 바탕색과 같아서 텍스트가 보이지 않습니다.

19. 레이어 스타일 아이콘을 클릭 합니다.

20. Bevel and Emboss를 선택합니다.

21. 스타일 대화상자가 보입니다.

22. Style에서 Outer Bevel을 선택합니다.

Depth 200, Size 8, soften 2를 설정합니다. OK 버튼을 클릭 합니다.

스타일 적용이 모두 끝났습니다.

이밖에도 다양한 문양이나 모양을 레이어로 만들어서 레이어 스타일 즉 이펙트 효과를 이용하면 다양한 시각적 효과를 갖으실 수 있습니다.

이상으로 버튼 만들기 학습을 마칩니다.