웹 써핑을 하다보면 블로그나 카페에 독특한 이미지로 전체 배경을 장식한 페이지를 보셨을 겁니다.
저의 이번 포스트도 전체 배경을 집어 넣고 작성할건데요.
웹 페이지에서 전체 배경으로 보여지는 소스 코드는
<STYLE> body { background-image:url(이미지 주소); background-attachment: fixed; background-repeat: no-repeat; background-position: bottom right;} table { background-color: transparent; } td { background-color: transparent; }</STYLE>
입니다.
위 소스 코드에서 이미지 주소에 들어갈 전체 배경을 만들어서 포스트 본문 상단이나 하단 아무 곳에 넣어주면
자신만의 전체 배경이 되는데요.
이미지 편집 툴인 포토샵으로 전체 배경을 만들어 보겠습니다.
저는 얼마전에 갈아 탄 cs5영문판으로 설명드릴 건데요.
포토샵 버전에 상관없이 참고하시면 될 겁니다.
1. 포토샵으로 전체 배경 만들기
포토샵을 실행하시고 file >open으로 적당한 크기의 이미지를 불러옵니다.
레이어 추가 아이콘을 눌러서 (단축키 Shift + Ctrl + N) 레이어 추가해 주시구요.
저는 박종우 선수의 독도 세레머니 이미지를 불러 와서 작업을 할려는데,이 이미지는 아무래도 검정색이 어울릴 것 같지요?
이미지에 어울리는 전경색을 선택하시고 페인트 툴을 눌러서 이미지 위에 마우스 클릭으로 부어 주세요.
레이어의 Opacity를 클릭해서 이미지가 보일 정도로 수치를 조절해 주시구요.
좌 측 도구 상자에서 지우개 툴을 선택하세요.
포토샵 상단 도구 메뉴 브러쉬 모드에서 가장자리가 선명하게 찍히는 브러쉬가 아닌 부드러운 브러쉬를 선택해서 이미지 위에
콕 콕(마우스 클릭) 찍어 줍니다.
그리고 다시 Opacity 수치를 100%로 올려 줍니다.
원본 이미지에 비해 이미지 가장자리가 검게 변했지요? 마음에 드신다면 file > save나 save as로 확장자 포맷 지정하시고 pc에 저장~
여기서 끝이 아니구요. file > new 하시고 가로 X 세로 픽셀의 수치를 1280 X 1024로 정해 주시고 새 창을 열어 주세요.
(해상도를 1280 X 1024로 맞추는 건 pc 모니터의 해상도를 고려해서 인데요.
가령 모니터의 해상도가 1024 X 768이라고 해서 전체 배경을 1024 X 768로 만들면,1280 X 1024의 해상도로 설정된 pc에서
보면 여백이 생겨서 이상하게 보이기 때문입니다.)
새로 열린 창에 작업해 놓은 이미지에 맞는 색상을 페인트 툴로 부어 주시고...
file > open하시고 작업해 논 이미지를 불러 옵니다.
그리고 이동 툴을 선택해서 작업해 놓은 이미지를 드래그로 새 창 원하는 위치에 갖다 놓으시고 마음에 든다면 저장~끝입니다.
아주 간단하게 전체 배경이 만들어 졌지요?
이제 만들어진 전체 배경을 업로드해서 소스 코드안에 넣어 주기만 하면 됩니다.
2.전체 배경 업로드하기
background image.txt
'컴퓨터' 카테고리의 다른 글
| 윈도우 7에 익스플로러 10을 설치해 보자~! (2) | 2013.01.22 |
|---|---|
| Photoshop CS6 '움직이는 사진(움짤,gif)만들기' (2) | 2013.01.09 |
| Windows Media Player 재생목록 mp3 변환 (3) | 2012.12.23 |
| 웹 페이지에 있는 음원 내 pc에 저장하기 (26) | 2012.08.08 |
| 무비 메이커 '오류 최소화하기' (1) | 2012.08.05 |
| 포토샵 " 한글판 ↔ 영문판 변환" (2) | 2012.08.03 |