워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

포토샵의 레이어스타일을 이용하면 다양한 효과를 줄 수 있는데 그림자효과는 레이어스타일로 표현할 수도 있지만 다른 방법으로도 가능합니다. 또한 이미지에서 하이라이트를 주는 방법에 도구모음의 닷지툴을 이용하지만 흰색으로 가우시안블러 필터를 사용하면 쉽고 정확한 하이라이트를 표현할 수 있습니다. 이러한 기존의 방법외에 다른 방법을 이용해서 이미지에 그림자효과와 하이라이트효과를 주는 방법을 알아봅니다.


stylish_advert_room.zip


이번글에서 사용할 작은 이미지입니다.

 
700X500픽셀의 새문서를 만들고 색상도구의 전경색을 클릭하여 색상코드 입력란에 0582ae 를 입력하고 OK클릭합니다. 배경색을 클릭하여 0ab7db을 입력합니다. 그래디언트툴을 선택하고 옵션바에서 4를 클릭하면 에디터 창이 나옵니다. 5의 전경색-배경색 프리셋을 선택합니다. 6에 이름이 나옵니다. 7의 선형(Linear) 그래디언트를 선택하고 캔버스의 상단에서 Shift키를 누르고 클릭드래그하여 하단까지 내려옵니다.


이미지를 중앙에 배치하는 팁 3가지를 알아봅니다. 이미지를 다운로드하여 압축을 풀고 포토샵의 메뉴에서 파일-불러오기(Place)를 선택하여 브라우저창에서 이미지파일을 선택하면 화면의 중앙에 배치됩니다. Place기능을 사용하지 않고 이미지를 열어서(Open) 별도의 화면에 연 경우는 클릭드래그하여 작업화면의 탭으로 이동하면 위 작업화면이 열립니다. Shift키를 누른채 마우스 클릭을 놓으면 화면중앙에 배치됩니다.  이미 위 화면에 불러온 경우는 이미지 레이어 4를 선택하고 Ctrl+A키를 누르면 5처럼 화면전체가 선택됩니다. 이동툴을 선택하면 옵션바에서 아이콘들이 활성화됩니다. 7와 8의 아이콘을 클릭하면 중앙에 배치됩니다. 
불러오기(Place)기능으로 이미지를 불러와서 2처럼 스마트오브젝트 아이콘이 생기는 경우는 이미지를 보존하기 위해서 설정한 것인데 이를 해제하려면 Ctrl+K를 누르면 환경설정창이 나옵니다. 일반항목(General)에서 우측하단에 3의 Place or Drag Raster Images as Smart Objects를 체크해제하면 됩니다.

 
위 이미지는 캔버스의 크기와 비율이 맞지 않으므로 비율대로 잘라줍니다. 방법은 다음과 같습니다. 1의 레이어가 선택된 상태에서 Ctrl+A키를 누르면 전체가 선택됨니다. 사각형선택툴을 선택하고 우클릭하면 메뉴가 나옵니다. 4의 Transform Selection을 선택합니다. 자유변형툴과 선택변형툴인데 두가지중 어느것을 선택해도 같은 모양의 변형툴이 나옵니다. 옵션바의 내용도 같습니다. 차이는 자유변형툴은 이미지가 변형되지만 선택변형은 선택만 변형됩니다. Shift+Alt키를 누르고 우측하단 모서리 조절점을 클릭드래그해서 안쪽의 이미지내부로 들어가도록 축소합니다. 엔터키를 치면 선택만 남습니다. 5를 클릭하면 레이어마스크가 만들어지면서 선택의 외부는 보이지 않게 됩니다. 위 이미지는 스마트오브젝트로 되어있기 때문에 이미지의 일부분을 지우거나 제거가 안됩니다. 하지만 레이어마스크로 보이지 않도록 하는 것은 가능합니다.

 
레이어스타일 추가 아이콘을 클릭하여 스트록(Stroke)을 선택합니다. 사이즈는 10, 포지션은 인사이드를 선택하고 컬러는 흰색으로 하면 테두리가 만들어집니다. 같은 창에서 내부글로우효과를 선택하고 블렌드모드를 Normal, 투명도를 줄이고 색상은 같은 계통의 푸른색(8)을 선택합니다. 이미지를 보면서 사이즈를 늘려줍니다.


1의 레이어가 선택된 상태에서 Ctrl키를 누르고 2의 아이콘을 클릭하면 레이어 아래에 새 레이어가 만들어집니다. 다각형 라쏘툴로 이미지 하단의 양쪽에 선택해줍니다. 모서리 부분은 이미지에서 너무 멀리 떨어지지 않도록해야 자연스럽습니다. 옵션바에서 5의 아이콘을 클릭하면 6처럼 추가로 선택할 수 있습니다. D키를 눌러 전경색을 검정으로 바꾸고 Alt+Delete키를 눌러 색을 채웁니다.


메뉴에서 필터-블러-가우시안블러를 선택하고 수치를 2로 입력한 다음 OK클릭합니다. 숫자 35를 치면 투명도가 35%로 됩니다. 이 투명도 단축키는 선택툴 그룹만 통하고 브러시그룹의 툴은 안됩니다.


도구모음에서 펜툴을 선택하고 옵션바에서 2의 셰이프옵션을 선택한 다음 3을 클릭하여 컬러피커에서 색상코드를 aa2041로 입력하고 OK클릭합니다. 4에서 7까지 클릭한 다음 4에 다시 클릭하면 셰이프가 만들어집니다. 이동툴을 선택하고 좌방향키 한번 상방향키 한번 눌러서 이동해줍니다. 9의 레이어스타일 아이콘을 클릭하여 그림자효과(Drop Shadow)를 선택합니다.


투명도를 줄이고 Distance와 사이즈는 2로 설정합니다. 같은 창에서 내부글로우효과를 선택하고 블렌드모드는 Hard Light, 투명도를 높이고 색상은 9a0f33을 입력합니다. 사이즈는 9로 해준 다음, 그래디언트 오버레이를 선택합니다.


1을 클릭하면 그래디언트 에디터가 나옵니다. 2의 슬라이더를 클릭, 3의 컬러를 클릭해서 색상코드를 530021입력하고 OK클릭한 다음 4의 슬라이더를 클릭, 다시 3을 클릭하여 색상코드를 e5355a를 입력하고 OK클릭합니다. 다시 OK클릭하여 에디터를 닫고 5에서 투명도를 약간 높이고 각도를 135도로, 스케일을 34로 설정하고 나옵니다.


Ctrl+J키를 누르면 레이어 복사됩니다. 다시 2의 레이어를 선택하고 Ctrl+T키를 눌러 자유변형툴이 나오면 클릭드래그하여 우측하단으로 이동하고 Shift키를 누르고 180도 회전하여 이미지의 코너에 배치합니다. 나중에 설정을 변경할 것입니다. 정확한 배치를 하려면 이동툴을 선택하고 방향키로 1픽셀씩 이동해주면됩니다.


1의 레이어 위에 새레이어를 두개 만듭니다. 1과 2의 레이어는 Ctrl키를 누르고 클릭하여 선택한 다음 Ctrl+E키를 눌러 병합합니다. 


1의 빈레이어를 선택하고 사각형선택툴을 선택한 다음 옵션바에서 3의 아이콘을 클릭합니다. 4와 5에 이미지처럼 선택해준 다음 배경색이 흰색인 상태에서 Ctrl+Delete키를 눌러 흰색을 채우고 Ctrl+D키를 눌러 선택해제합니다. 메뉴에서 필터-블러-가우시안 블러를 선택하고 수치를 조정합니다. Alt키를 누르고 두개의 레이어 사이인  8에 클릭하면 클리핑마스크되면서 블러효과의 여백이 정리됩니다.


1레이어를 선택하고 2의 그래디언트 오버레이를 더블클릭해서 레이어스타일 창이 나오면 4의 미지지부분을 클릭드래그하여 우측하단으로 이동하면 어두운 부분이 아래로 내려가고 밝은 부분이 나타나게 됩니다. 1레이어 위에 새레이어를 만들고 두개의 레이어를 선택하고 Ctrl+E키를 눌러 병합합니다.  6레이어를 Ctrl+J키를 눌러 복사한 다음 5의 위치로 이동하고 이미지는 자유변형툴로 180도 회전하여 배치한 다음 클리핑마스크시켜줍니다. 


문자툴을 선택하고 글자를 만든 다음 Ctrl+T키를 눌러 자유변형툴로 크기를 조정하고 회전하여 배치하면 완성입니다.