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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

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

사이트 이미지
웹사이트

회원관리 사이트

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

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

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

사이트 이미지
쇼핑몰

해외 쇼핑몰

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

사이트 이미지
쇼핑몰

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

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

포트폴리오 보기

블로그 인기글

커스텀 디자인

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

Brizy Pro

페이지 빌더

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

Elementor Pro

페이지 빌더

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

Advanced Custom Field Pro

사용자 정의 필드

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

Pods

사용자 정의 콘텐츠 타입

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

블로그

오늘은 의뢰인께서 사이트에 사용할 이미지를 보내주셨는데 이미지는 보기 좋으나 웹페이지 배너에 사용하기 어려운 이미지였습니다. 아래와 같았습니다.

이것이 왜 좋지 않은 이미지인가하면 사진은 자유롭게 잘라서 사용하기 좋도록 피사체를 프레임 안쪽으로 넣어서 찍어야 하는데 코코넛이나 레몬(?)이 프레임에 걸쳐있습니다. 이렇게 되면 웹페이지에서 화면폭 전체를 사용하는 슬라이드 배너에 사용할 수가 없습니다. 상하 높이는 상관 없지만 좌우 폭을 늘려야 하는데 불가능하죠. 

사진을 찍은 포토그래퍼도 원본 이미지를 저렇게 찍지는 않았을 것이라 생각하고 원본을 구해보시라고 했지만 위 이미지 뿐이라고 합니다. 결국엔 포토샵을 이용해 편집하는 수밖에 없게됐습니다.

우선 필요한 것이 코코넛 이미지와 레몬 이미지인데 배경이 투명한 png 파일을 구글링해봤습니다. 해서 찾아낸 사이트가 딱 있더군요.

http://www.pngpix.com/

카테고리별로 잘 정리돼있고 검색도 가능합니다. 필요한 이미지를 찾아냈습니다.


1. 원본 이미지에서 불필요한 부분 제거하기

원본이미지에서 코코넛과 레몬을 각종 지우기 툴로 지웁니다. 콘텐트 어웨어 필, 스팟 힐링 브러시, 힐링 브러시, 도장툴 등등..

2. 이미지 폭 늘리기

캔버스를 늘리고 좌측 여백을 잘라서 복사한 다음 변형툴을 이용해 끝까지 늘려주면 티끌이 나타납니다. 가우시안 블러를 이용해 제거합니다. 우측도 마찬가지 작업을 합니다. 이미지는 그냥 배경색을 입혀주면 안됩니다. 색을 추출하면 한가지 색상만 나오는데 이미지에서는 한가지 색상이 아니라 그림자도 있고 해서 상당히 다른 색이거든요.

3. 오브젝트 배치

코코넛 하나를 배치하고 크기를 조정합니다. 이 레이어를 복사해 아래 레이어에 검정색을 입혀준 다음 가우시안 블러 처리 및 투명도 조절한 다음 우측으로 위치 이동하면 그림자가 됩니다.

나머지 이미지도 같은 방식으로 배치해 그림자를 만들어주면 아래처럼 완성됩니다.

이미지를 제대로 촬영하지 못하면 고생합니다. 이렇게 까지 해야하나 하는 의문이 들기도 하죠. 웹페이지에서 중요한 부분을 차지하는 상단 배너라서 어쩔 수가 없더군요.