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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

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

사이트 이미지
웹사이트

회원관리 사이트

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

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

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

사이트 이미지
쇼핑몰

해외 쇼핑몰

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

사이트 이미지
쇼핑몰

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

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

포트폴리오 보기

블로그 인기글

커스텀 디자인

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

Brizy Pro

페이지 빌더

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

Elementor Pro

페이지 빌더

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

Advanced Custom Field Pro

사용자 정의 필드

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

Pods

사용자 정의 콘텐츠 타입

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

블로그

대각선으로 선이 그려진 패턴(빗살무늬)은 일반적으로 1픽셀로 된 것을 많이 사용합니다. 예전에 1픽셀이상으로 된 대각선 패턴을 만들어 보다가 픽셀의 의미를 새삼 느끼게 됐습니다. 가로세로 10픽셀로 된 정사각형 모양의 대각선의 픽셀은 몇개일까? 어림짐작으로 한 13개쯤 되겠다 싶어서 세어봤습니다. 그런데...그게 아니더군요. 피타고라스의 정리에 의하면 a^2 + b^2 = c^2 입니다. 10^2 + 10^2 = c^2이니까 c = 10루트2가됩니다. 루트2는 1.4142... 이니까 14.142개가 됩니다. 그런데 픽셀이 소수점까지 나온다고? 이러한 의문점을 갖고 1픽셀 초과되는 대각선 패턴을 만드는 방법과 음영이 있는 빗살무늬 패턴 만드는 방법을 알아봅니다.

1. 음영이 있는 빗살무늬 패턴 만들기


우선 음영이 있는 패턴은 사진위에 적용하면 세련된 사진을 만들 수 있습니다. 6*6픽셀의 새문서를 만든 다음 Shift+백스페이스키를 누르고 1에서 50% 회색을 선택하여 채워줍니다. 연필툴을 선택하고 1픽셀로 한 다음 화면을 3200%확대하여 검정색과 흰색으로 사진 처럼 클릭해서 만들고 메뉴에서 편집-패턴정의를 선택하여 이름을 입력하면 패턴 등록이 됩니다.


사진을 포토샵에 불러와서 새 레이어를 만들고 그래디언트 툴과 같이 있는 페인트통 도구를 선택한 다음 옵션바에서 패턴을 선택합니다. 4의 작은 세모를 클릭해서 등록한 패턴을 선택하고 사진에 클릭해주면 회색배경의 빗살무늬가 나옵니다. 6에서 블렌드모드를 오버레이로 선택하면 사진 이미지가 나타납니다. 빗살무늬가 강하면 투명도를 줄여줍니다. 상단 배너에 사용된 이미지는 이 패턴을 이용한 것입니다. 패턴의 크기를 변화시키려면 패턴오버레이를 사용합니다.


새레이어에 50% 회색을 채우고 2에서 Fill을 0으로 하면 이미지가 나타납니다. 3을 클릭하여 패턴오버레이를 선택합니다.


블렌드모드를 오버레이로 선택하고 패턴을 선택한 다음 스케일을 조절하면 됩니다.

2. 다양한 형태의 빗살무늬 패턴 만들기


첫번째 이미지는 1픽셀로 그린 패턴으로 그아래 이미지가 패턴 적용한 것입니다. 두번째는 2필셀로 만든 패턴으로 2픽셀 이상으로 만들면 점점 굵어집니다. 저걸 일일히 연필툴로 그리기는 힘이 들죠. 그래서 연필툴로 픽셀을 높여서 만듭니다.



정사각형의 배경을 만들고 10픽셀의 연필툴로 1에서 클릭한다음 2에서 shift키를 누른채 클릭하면 한번에 사선이 그려집니다. 이상태로 패턴을 저장하면 안됩니다. 1픽셀 패턴의 경우는 그대로 저장했지만 2픽셀이상은 4부분과 대각선방향에 픽셀을 그려줘야합니다. 몇픽셀로 해야하는가는 3의 면과 이어지는 패턴을 생각해보면 알수있습니다 3이 10픽셀이니까 1픽셀 적은 9필셀로 4부분에 그려줘야합니다. 



가이드를 그려서 1부분과 3부분을 사각형 선택툴로 선택하고 Alt키를 누른채 클릭드래그해서 2와 4에 붙여넣으면 완성입니다. 메뉴에서 편집-패턴정의를 선택하여 패턴으로 등록하고 사용하면 다음과 같이 나옵니다.



굵은 사선으로 된 패턴입니다. 이걸 그리면서 가로세로 10픽셀로 된 정사각형의 대각선의 픽셀은 몇개인가를 세어봤는데 예상외로 10개였습니다. 픽셀은 길이의 단위가 아니라 화소의 단위이고 길이가 없습니다. 확대를 하면 커지고 축소하면 작아지지만 길이의 개념이 존재하지 않습니다. 그러니 1픽셀의 대각션의 길이는 얼마인가하면 그냥 1픽셀입니다. 픽셀은 그저 모니터 화면상의 점에 불과합니다. 이것을 피타고라스의 정리로 계산하려했으니 14.142.....개라는 엉뚱한 숫자가 나온것입니다.