◀ [그림 9] Stroke를 적용한다.

[9] 글꼴 테두리에 흰색의 스트로크를 주기 위해서 스포이드 툴로 컬러팔레트의 흰색을 한 번 클릭한 다음 Edit->Stroke를 선택한다. 양천중학교라는 텍스트는 비교적 사이즈가 크므로 Width를 2pixel로 하고 위치는 Outside로 한 다음 OK를 누른다. 그러면 글꼴 테두리가 흰색으로 변해 있을 것이다. 그런 다음에 약간의 그림자 효과를 주려고 하는데...

[그림 10] Eye candy에서
Drop Shadow를 적용 ▶

[10] 상단 메뉴바에서 Layer->Effects->Drop Shadow로 효과를 준다. 더욱 편리하게 그림자 효과를 주기 위해서는 Eye Candy라는 플러그인 필터를 사용하면 된다. 그림은 아이캔디를 실행한 모습이다. 여기에서 텍스트와 그림자와의 거리, 각도, 흐림정도, 그림자의 색 등을 마음대로 정할 수 있다. 미리보기 창이 있으므로 관찰해가면서 효과를 줄 수 있다.

◀ [그림 11] 일차 완성된 초기화면의 이미지

[11] 학교의 주소와 전화번호를 입력한 후 저장을 선택하면 되는데, 배경과 조화를 이루게 위해 이런 그림은 투명이미지 효과를 주는 것이 좋다. 먼저 Image->Mode->Indexed Color로 바꾼 다음, File->Export->gif89a Export...를 선택하자. (물론 이미지의 색상이 복잡한 것은 jpg로 저장하는 것이 파일의 용량을 줄이는 방법이기도 하다.)

[그림 12] 투명이미지로 저장하자 ▶

 [12] 요즘은 Interlaced(웹상에서 이미지를 먼저 모자이크상태로 로딩하는 기법) 기능을 안 쓰는 경향이다. 따라서 이곳의 체크 표시를 지워주고  스포이드 툴을 '투명하게 만들고 싶은 색상'위에 올려놓고 클릭한다. 대략 웹페이지의 바탕색과 같은 색을 클릭하면 된다. 아래 색상표에서 투명하게 만들고 싶은 색상들을 추가로 선택할 수도 있다. 이제 OK를 클릭하여 빠져나가면 된다. 이제 이 그림은 gif 포맷의 투명이미지로 저장된다. 이제 저장된 이미지를 웹문서에 삽입하여 브라우저에서 확인해보면 된다.

몇 가지 점검해야 할 부분들에 대하여

 1. 브라우저에서 그림이 안보일 때

 그림 파일명과 웹페이지의 파일명을 한글로 하면 익스플로러 5.0에서 안 보이는 경우가 있다. 이 때는 '새로보기'를 한 번 눌러주면 되지만 매번 그럴 수는 없으므로 그림파일명, 디렉토리명을 영문으로 고친다. 그래도 안 보인다면 그림 파일의 경로가 잘 못 지정된 경우이다. 그림파일이 있는 폴더를 다시 확인해보고 경로를 올바로 지정해준다.

 2. 이미지의 사각 테두리가 보일 때

이미지 태그에서 테두리 값을 0으로 해야 바탕화면과 부드럽게 섞여서 어울려 보인다. <img src="./image/student01.gif" border=0> 와 같이 border=0을 삽입한다.

 3. 그라데이션이 예제와 다르게 적용될 때

그라데이션 타입이 잘 못 지정된 경우이다. 그라데이션 툴을 마우스로 누른 상태에서 잠시 기다리면 몇 개의 타입이 뜨는데 그 중에서 직선 형태로 적용되는 선형그라데이션(Liner Gradient Tool)을 선택하기 바란다.

 4. 글꼴의 모서리가 부드럽지 않고 톱니처럼 보일 때

 Type Tool에서 Anti-Aliased를 체크하지 않았을 때 나타나는 현상이다. 텍스트 이미지를 만들 때에는 이 옵션을 체크하여 글꼴의 외곽을 부드럽게 처리하도록 한다.

 5. 글자만 수정하고 싶을 때

 대부분의 그래픽 프로그램에서 그림을 편집하거나 새로운 내용을 추가하면 '레이어'라고 부르는 계층 단위로 저장이 된다. 따라서 텍스트만 수정하려면 레이어 합성을 하기 전에 레이어 창에서 해당 레이어의 글꼴을 마우스로 두 번 누르기하면 텍스트를 수정할 수 있다.

 6. 한 번 쓴 색을 기억하여 계속 쓰고 싶다.

 예제에서 바탕색을 정할 때처럼 RGB모드를 사용자가 정해서 쓰면 그 다음에 같은 색을 쓸 때 RGB 넘버를 계속 외우고 있어야 한다. 이럴 때는 Color 팔레트에서 필요한 색을 정한 후 Swatches 탭의 여백에 마우스로 끌어 놓는다. 다음부터는 이곳에 등록된 색을 스포이드툴로 찍어서 쓰면 된다.  

 보기 좋은 디자인은 홈페이지를 돋보이게 한다.

   알찬 정보가 많이 있으면 방문객이 늘고, 피드백도 좋다. 그렇지만 이왕이면 다홍치마라고 너무 텍스트 위주로 처리한다든지, 의미 없는 그림이나 학교 전경사진만 덜렁 올려놓는 것보다는 신세대 학생들의 감각에 맞는 그림이나 사진을 구하여 적당히 편집하고 손질하여 꾸미게 되면 훨씬 분위기가 살아난다. 아울러 방문객이 그냥 보고 끝나는 일방향의 홈이 아니라 상호 의견을 교환할 수 있고 추가된 정보를 여러 사람에게 알리는 것은 사실 학교홈페이지의 가장 중요한 요소이기도 하다. 다음 강좌에서는 검색엔진, 메일링리스트, 자유링크, 게시판 등 상호작용을 활발히 할 수 있는 홈페이지를 꾸미기 위한 프로그램 설치법을 실습한다.   

--------------------------------------------------------