노마드 라이프/내가 경험한 이커머스

[상세페이지 디자인] 이미지를 위한 색상조합 컬러조합 사이트 그라데이션편

해니 2021. 4. 9. 23:03
반응형

지난 포스팅에서도 상세페이지나 컨텐츠제작에 필요한 색상조합, 컬러 조합 사이트를 소개하는 포스팅을 작성했었다.

이번 포스팅은 색상 조합 사이트 중 "그라데이션" 컬러를 조합해주는 사이트를 소개하려고 한다. 


1. uigradients UI그레디언트 

 

uiGradients - Beautiful colored gradients

uiGradients is a handpicked collection of beautiful color gradients for designers and developers.

uigradients.com

UI그레디언트는 그라데이션 컬러를 조합해주는 사이트이다.
그레디언트 컬러를 사용해 이미지를 조금 더 화려하게, 그리고 깊은 느낌을 줄 수 있게 사용하곤 한다. 
그레디언트로 표현을 했을 때 더 예쁘고, 보다 조화롭게 하기위해서 사용하면 좋다.

사이트에 들어가게되면 추천해주는 모든 컬러를 볼 수 있는 보드가 있다.

이렇게 추천해주는 컬러를 클릭하여 어떤 컬러가 사용되었는지 컬러 코드표를 확인해볼 수 있다. 

붉은 컬러로 체크둔곳이 보일것이다. 누르기만 하면 자동으로 복사가 된다. 복사된 코드표를 갖고 포토샵 등의 색상을 입력하는 곳에 붙여넣기를 해서 사용할 수 있다. 


2. BLEND 블렌드

 

Blend—Create and customize beautiful CSS3 gradients.

Blend—Create and customize beautiful CSS3 gradients.

www.colinkeany.com

블렌드 사이트는 두가지 색상을 내가 선택하여 "LET'S BLEND!"를 클릭해준다.

좋아하는 두개의 색상을 블렌드해보겠다. 

그러면 이렇게 구분되어 있던 컬러가 자연스럽게 블렌딩되면서, 그레디언트 효과를 만들어준다. 포토샵에 적용전에 살펴보거나 배경색을 만들때 사용하기에 좋다. 

여기도 색상코득 나오기때문에 그 색상코드를 복사해서 가져가 사용하면 된다.


3. 웹그레디언트

 

Free Gradients Collection by itmeo.com

Free collection of 180 background gradients that you can use as content backdrops in any part of your website.

webgradients.com

웹그레디언트를 접속하면 이렇게 첫 페이지가 나온다.

이렇게 색상들을 추천해주는데, 추천해주는 색상을 선택하거나 PNG컬러로 다운로드 받을 수 있다. 선택해서 코드표만 사용해도 되고, 다운로드 받아서 이미지를 사욜하는 방식으로도 가능하다. 

COPY CSS를 누르면 아래처럼 CSS 코드가 나온다. 그대로 CSS를 복사하여, 필요한 곳에 붙여넣고 사용해도 좋다. 
background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);


이미지를 제작하기 위해 필요한

색상조합 / 컬러조합 사이트 그레디언트편을 알아보았다.
그라데이션 효과를 주고싶은데 어떤 컬러로 조합해야할지 모르겠을때! 사용해보시길 추천하고
색상에 대해 공부할때 레퍼런스로 봐도 좋다.


상세페이지 디자인, 이미지 제작시 필요한 #사이트편 포스팅

#이미지편집기 #상세페이지제작 #이미지편집기 

 

상품 썸네일 이미지, 상세페이지 이미지 쉽게 만드는 #이미지편집기 이미지 편집 툴

스마트스토어, 쇼핑몰 상품 썸네일 이미지, 상세페이지 쉽게 만드는 툴 소개 스마트스토어, G마켓, 쿠팡 등 쇼핑몰에 입점하여 상품을 판매하기 위해서 각각의 쇼핑몰에서 제공하는 판매자센터

mamul.tistory.com

#폰트 #상세페이지폰트 #상업적폰트

 

상세페이지 썸네일 이미지 SNS 광고 등 이미지에 삽입할 #상업적폰트 (다폰트,눈누) 무료폰트

상세페이지 등과 같은 온라인에 사용되는 이미지를 제작하다 보면 아이콘, 사진 그리고 보다 예쁜 상업용 폰트 등을 찾게 될 것이다. 오늘은 이미지 편집에 필요한 상업용 폰트와, 아이콘 등을

mamul.tistory.com

#무료이미지 #무료일러스트 #이미지소스

 

상세페이지를 위한 #무료이미지 소스 상업적 이용 가능 이미지들 프리픽 셔터스톡 픽사베이

이미지를 제작하다보면 아이콘이 필요할 때도 있고, 이미지가 필요할 때도 있고 일러스트가 필요할 때가 있다. 필요할때 다른 사람이 이미 만들어놓은 이미지 또는 아이콘을 사용할 수 있다면?

mamul.tistory.com

#색상조합 #컬러조합 #컬러추천

 

디자인을 하기 위한 컬러조합 #색상조합 #컬러추천 사이트 3개 소개

디자인을 하거나, 무언가를 만들어야할 때 가장 많이 고민하고 시간을 쏟는 부분이 "컬러" 이다. 어떤색을, 어떻게 입혀야 조금은 이미지를 개성있게 보여줄 수 있을까? 또는 오늘 이 옷에 어떤

mamul.tistory.com

#색상조합 #컬러추천 #그라데이션 #그레디언트

 

상세페이지 이미지 제작에 필요한 색상조합 사이트 #그라데이션편

지난 포스팅에서도 상세페이지나 컨텐츠제작에 필요한 색상조합, 컬러 조합 사이트를 소개하는 포스팅을 작성했었다. 이번 포스팅은 색상 조합 사이트 중 "그라데이션" 컬러를 조합해주는 사이

mamul.tistory.com

#색상조합 #색상추천 #취향저격 

불러오는 중입니다...

 

반응형