주사선 효과란?
PXE Super Screen v2.1 스킨의 샘플로 사용된 동영상에서 티브이 주사선을 보셨을겁니다. 이런 화면 망점을 표현하는 기법을 간략히 소개합니다. 옛날에도 이런 주사선을 표현하는 튜터리얼이 있었습니다. 그 당시는 거의 수평 주사선으로서 지금 생각해보면 참 단순하다고 생각했습니다(물론 효과는 좋았습니다만). 이제는 세월도 흘렀고 주사선을 만드는 방법도 더 어려워졌습니다. 저도 화면을 3800%로 확대해서 눈이 빠지게 픽셀을 찍어댔으니까요. 지금부터 고급 주사선 효과를 한번 내보겠습니다. 더 고급 방법은 거의 광학적인 지식과 수학이 합해져야 하는 고통이 따르므로 중간단계 난이도만 만들어 봅시다.
어떤 효과를 주는가?
PXE Super Screen v2.1의 동영상을 보시면서 전체화면에서도 꽤나 깔끔한 화질의 영상임을 느꼈을겁니다. 사실 본래 원본 소스 동영상은 크게 확대하면 픽셀이 전부 깨지게 마련이죠. PXE Super Screen v2.1의 원본 동영상도 주사선 효과 없이 그냥 풀 스크린으로 확대되면 아래와 같이 화질이 그다지 좋지 않습니다.
여기에 주사선 효과를 넣으면 생각보다 환상적인 결과를 가져다주죠. (꼭 이미지 클릭해서 원본 사이즈로 보세요)
눈속임입니다. 주사선 효과 때문에 픽셀의 뭉개짐이 감춰진 것이죠. 게다가 이런 주사선 효과는 꽤나 열악한 환경의 스크린을 통해 보는 느낌을 주기 때문에 원본 소스 자체도 뭔가 지하실에서 몰래 촬영됐다거나 하는 등의 비밀스러운 느낌을 가지고 있어야 합니다. 공포영화 링에 나오는 귀신도 아주 후진 TV에서 기어나오죠. 귀신이 기어 나오는 티브이가 영화에서 엄청난 주사선을 발산합니다. 이처럼 주사선을 사용 할 대상은 왠만해선 정상이 아니어야 합니다. 너무 정상인 이미지나 동영상에 이 주사선을 넣으면 느낌이 제대로 살지를 않습니다.
PXE Super Screen v2.1의 동영상도 클럽이라는 촬영하기에 아주 열악한 환경이라는 점이 인식되기 때문에 이 주사선이 먹힌다고 볼 수 있습니다. 게다가 좀 선정적인 이미지도 이 주사선이 어느정도 커버를 해주거든요. 이제 각설하고 주사선 만드는 법을 알아봅시다. 자세하게는 설명을 안하므로 그냥 포토샵 키시고 순서대로 따라해주세요.
포토샵에서 주사선 만들기
1. 가로너비 8px, 세로너비 8px의 흰색 배경의 캔버스를 하나 만들고 돋보기툴로 최대 확대(3200%) 합니다.
2. 새로운 레이어를 하나 만들고 검은색으로 채웁니다
3. 검은색으로 채운 레이어의 투명도(Opacity)를 27%로 설정합니다
4. 검은색으로 채운 레이어를 감춥니다. 다른 작업에 방해가 되거든요. 레이어 팔레트에서 눈 모양 클릭하면 감추기/보이기 되는거 아시죠?. 그리고 새로운 레이어를 하나 만들고 위 그림과 같이 검은색 사각형을 그린 후 투명도를 35%로 설정합니다. 그냥 복잡하게 생각하지 말고 위 그림대로 똑같은 위치에 그리면 됩니다. 왜 저기에 그려야 하는지 설명하기 시작하면 별에 별 이야기 다 해야하므로 그냥 무작정 따라하기로 갑니다.
5. 작업했던 레이어를 또 감추고 다시 새로운 레이어를 하나 만듭니다. 위 그림과 똑같이 검은색으로 채웁니다. 이제부터는 연필툴로 1픽셀씩 찍는게 편합니다. 그리고 투명도를 40%로 낮춥니다.
6. 작업하던 레이어를 감추고 새로운 레이어를 또 만듭니다. 연필툴로 위 그림과 똑같은 위치에 픽셀을 찍습니다. 투명도는 그대로 100%입니다.
7. 작업하던 레이어를 감추고 새로운 레이어를 또 만듭니다. 연필툴로 위 그림과 똑같은 위치에 픽셀을 찍습니다. 투명도는 그대로 5%로 설정합니다.
8. 이제 지금까지 가려놓았던 레이어를 전부 보이게 합니다. 다 키면 위 그림과 같이 됩니다.
9. 이제 레이어중에 가장 하단에 있는 흰색 백그라운드 레이어를 삭제합니다. 그러면 이제 백그라운드 레이어가 없으므로 위 그림과 같이 투명배경이라는 뜻의 점박이 무늬가 나타나죠. 이제 모든 레이어를 선택해서 포토샵 메뉴의 Layer > Merge Layer를 적용해서 1개의 레이어로 합칩니다. 이로써 주사선을 구성하는 1개의 단위가 만들어졌습니다. 지금까지 만든 이 1개의 단위가 패턴화되면 화면을 주사선으로 메우게 됩니다.
이 상태에서 그대로 PNG 포맷으로 저장을 하면 웹에서도 사용 할 수 있습니다. 백그라운드에 이미지를 깔고 그 위에 DIV를 하나 만들어서 여기에 이 주사선 패턴을 넣으면 완벽하게 작동하죠. 문제는 포토샵에서 일반적인 이미지에 적용할 때 입니다. 포토샵의 Define Pattern 명령을 사용해서 패턴화 시켜서는 안됩니다. 그 명령어는 화면 자체를 스크린샷으로 찍어버리는 효과를 가지고 있기 때문에 백그라운드의 점박이 문양까지 전부 찍히게 됩니다.
저도 포토샵에 올인 한 사람은 아니기 때문에 무식하게 그냥 카피해서 붙이기로 사용합니다. 처음에 한 몇개 붙여 놓고 레이어 합치고, 다시 합친 레이어 카피해서 또 붙이는 무식하고 원시적인 방법을 사용하죠. 혹시 좋은 방법 아시는 분은 귀뜸 좀? 아무튼 패턴화 된 파일도 첨부해서 올리니 필요하신 분은 잘 사용해 보시기 바랍니다. Grid.zip
Trackbacks0
Comments4 total comments, leave your comment or trackback.
-
03 Aug 2009 -
03 Aug 2009 -
09 Aug 2009
-
10 Mar 2010
댓글 쓰기 권한이 없습니다. 회원 가입후에 사용 가능합니다
포토샵 cs3 사용중인데 Define Pattern을 사용해도 뒤 가이드는 패턴화 안되네요. 버젼문제인든 싶어요.
Define Pattern로 패턴화하고 Fill(Shift+F5)로 패턴 선택해서 채워보니 완벽!! 멋져요
그리고 좋은 자료 정말 감사합니다 ㅎㅎ