Noname

무턱대고 시작합니다.
이쯤되면 오신 분들은 이곳 주인장이 블로그에 써본걸 순서대로 푸는것을 아셨을 겁니다... 확실히 쓸데없는 글이군요;;


앞서 꾸미기 #3에서 반투명 내지 효과를 주었습니다.
그에 연장하겠습니다.



[내지 양쪽에 찢은듯 한 효과 주기] 또는 [그림자효과 주기]


내지 양쪽에 찢은듯 한 효과를 주기 위해서는 #body와 #container의 폭의 차이가 존재해야 합니다.

css편집을 들어가서 위의 두 항목 하위에 있는 width 옵션의 수치를 확인하세요.



저의 경우 #body는 1024px, #container는 1010px 입니다.
14픽셀 차이가 나므로 양쪽에 각각 7픽셀씩의 효과를 줄 공간이 생기는군요.


이 효과를 더욱 넓은 공간에 적용하고 싶다면 #body의 폭을 늘리시면 됩니다.
(또는 #container의 수치를 줄여주시면 됩니다만 #container의 수치를 줄이면 #header, #sidebar, #content, #footer의 수치를 함께 조정해야 할 상황이 대부분이므로 #body의 폭을 조정하시는것을 추천합니다)




이제 간단히 그림자 효과를 만들어주는 파일을 만들어 보도록 하겠습니다.


포토샵을 열고 새 파일을 만듭니다.

이때 폭은#body의 폭을 넣어주어야 합니다.

높이는 자신이 적용하려는 그림자효과 범위의 4배 정도를 넣어주시면 됩니다.
(저는 7픽셀을 사용하려 하므로 7x4=28픽셀입니다)

배경내용은 꼭 투명으로 설정하시기 바랍니다.


만든 파일에서 Alt + A 를 눌러 전체 선택을 한 다음 포토샵 메뉴 > 선택 > 수정 > 축소 를 눌러주세요.
축소값은 자신이 적용하려는 그림자효과 범위입니다.(저의 경우 7픽셀)



선택된 영역이 축소가 되면 포토샵 메뉴 > 선택 > 수정 > 페더 를 눌러주세요.
페더값은 적용하려는 그림자효과의 범위입니다.(저의 경우 7픽셀)



이제 원하는 그림자 색상을 선택한 후, 그라데이션 도구를 페인트 통 도구로 바꾸어 주어 이미지에 칠합니다.



색이 칠해졌다면 Alt + A 를 눌러 전체 선택을 하신 다음에 포토샵 메뉴 > 선택 > 반전 을 눌러주세요.

가운데 네모난 부분이 선택되어 있을 겁니다.


가볍게 Delete 키를 눌러 선택된 부분을 지웁니다.



가운데가 지워지면 우리가 원하는 크기로 제단합니다.


폭은 그대로 두시고 높이를 그림자효과가 들어갈 폭 x 3배 만큼 줄이시면 됩니다.(저는 28 - 21 = 7픽셀)


이제 만들어진 이미지를 저장합니다.
포토샵 메뉴 > 파일 > 다른이름으로 저장 을 누릅니다.

저장형식은 png로 하셔야만 투명효과가 적용됩니다.


이제 만들어진 파일을 서버에 업로드합니다.
그림파일을 올리시는 방법은 블로그 관리 > 블로그 스킨 > 스킨 편집 > 이미지 등록 순으로 들어가시면 됩니다.




이렇게 올리셔서 주소를 저장하세요.


이제 그림자 효과 또는 기타 원하시는 효과가 들어간 파일을 #body의 배경으로 올려주시면 됩니다.


및줄 쳐진 녹색 글씨 부분이 그림 파일의 주소입니다. 이 줄을 그대로 복사해 넣으시고 그림파일의 주소만 자신의 것으로 바꿔주시면 됩니다.




저는 1024픽셀의 양쪽 폭에서 양쪽 7픽셀씩을 이용하여 내지가 찢어진 효과를 넣고 투명도가 80%인 내지와 어울리도록 같은 투명도를 적용시켜서 만들어 보았습니다.


파일이 필요하시면 80% 투명도의 흰색 내지와 폭1024에 양옆 7픽셀 찢어진 효과을 눌러 다운받아 주세요.


수고하셨습니다^^