'이미지 그림자'에 해당되는 글 2건

  1. 포토샵으로 그림이나 글자에 비치는그림자 효과 만들기 1
  2. 티스토리 이미지에 그림자 효과내기

이미지 편집프로그램은 다양하게 존재하고 있습니다.

흔히 포토샵이나 일러스트를 많이 사용하는데 오늘은 그중 포토샵을 활용하여

그림이나 글자에 다음과같이 비치는 그림자효과를 만드는 방법에대해 알아보겠습니다.

 

네.. 현재 티스토리의 배경으로 사용하고 있습니다. ㅎ

혹시나 필요하신 분들을 위해! 만드는 방법을 알려드리겠습니다. 사용한 포토샵의 버전은 CS5 입니다.

 

일단 새로 만들기로 문서를 만들어줘야 겠죠?? 

 

배경이미지를 바꿔주기 위해 색상을 선택하고 페인트로 배경색을 바꿔 줍니다. 

   

 

그다음 글자를 추가해 줍니다! 일단 간단하게 만드는것만 보여드릴려고

100ptHY수평선M, 흰색 색상을 적용했으며 그라데이션도 적용했습니다!

 

그라데이션 주기! 텍스트로 작성된 레이어를 더블클릭 한후 그레이디언트 오버레이만 주었습니다!

알맞게 효과 주시고 확인버튼을 눌러 적용하시면 됩니다. ^^

 

이후 기존의 Hello레이어를 클릭한후 Ctrl + J를 눌러 레이어를 복사합니다.또한

하단의 새레이어 만들기버튼을 눌러 레이어를 만든후 사본레이어와 새로만든 레이어를 Ctrl이나 Shift를 눌러 같이 선택후

Ctrl + E를 눌러 레이어를 합칩니다.

    

 

합치게되면 레이어1만 남는 상태가 되는데 Ctrl + T를 눌러 레이어 위쪽 상자를 잡아 밑으로 끌어줍니다.

그러면 가운데 화면처럼 밑으로 이미지가 거꾸로 나타나게되며 적당히 크기를 조절한후 Ctrl + 엔터나 우측 넘버패드쪽의

엔터를 눌러 작업을 완료해줍니다. 위의 레이어와 간격을 주고싶으면 V를 눌러 이동 도구 상태에서 위아래 화살표로

간격을 적당히 줍니다.

     

 

 그 후 거꾸로 나타나있는 레이어를 클릭후 다음과 같이 하단의 마스크를 적용하면 레이어 오른편에 새로운 레이어가 추가됩니다.

 

그라디언트 도구를 선택후 2번째 그림처럼 마우스를 밑에서 위로 끌어줍니다!

1자로 끌고 싶으시면 Shift를 누른상태에서 마우스를 끌면 됩니다.

     

 

완성!

 

참 쉽죠잉!? 블로그를 하시는 분들이라면 한번쯤은 적용해보고 싶은 효과가 아닌가 싶어 글을 올려봤습니다.

이상 비치는 그림자 효과를 만드는 방법에 대해 알아보았습니다. ^^

티스토리는 설치형 블로그로써 다양한 스킨의 제작과 

사용자 입맛에 맞게 HTML/CSS를 수정 할 수 있는 장점이 있습니다.

그 중 간단한 CSS수정으로 이미지에 다음과 같이 그림자 효과를 넣는 방법에 대해 알려드리겠습니다.

관리자 페이지의 HTML/CSS 편집 탭으로 들어가게 되면 style.css가 존재하는데 

다음과 같이 imageblock클래스에 box-shadow를 추가해주시면 됩니다.

상세 설명을 드리면

5px - 가로길이 양수인경우 오른쪽, -숫자인경우 왼쪽으로

5px - 세로 양수인경우 밑으로, -숫자인경우 위로

10px - 그림자 길이인데 숫자가 낮으면 그림자의 흐림효과가 적으면서 길이가 짧고

    높을수록 많이 흐려지고 거리도 멀어집니다. -숫자 값은 인식되지 않습니다.

rgba - 순서대로 r, g, b, 불투명도 입니다. 지금은 rgb값을 사용안하므로 0으로 지정하고 

    0.3의 불투명도 입니다. 값이 높을수록 그림자가 진해지며 -값은 적용되지 않습니다.


값을 수정하면서 마음에 드는 그림자 효과를 만들어보세요. ^^