디자인 무료 툴(CSS, SVG)

 

 

ColorSpace (색상 팔레트)

https://mycolor.space/

ColorSpace - Color Palettes Generator and Color Gradient Tool

 

색상 팔레트 

-웹사이트에서 주로 사용할 색상 하나를 골라서 헥스 색상값을 입력하면 

어울리는 색상 팔레트들을 알려준다.

 

ex) FF6863

 

알려준 값을 root로 설정해 사용할 수있다. (포인트 줄 때 사용)

:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary: #ff6863;
  --color-pink: #DD5A87;
 }

 

 

 

 

 

 

CSS Gradient (그라데이션 색상)

https://cssgradient.io/

CSS Gradient — Generator, Maker, and Background

 

 

시각적으로 확인해서 원하는 그라데이션을 줄수있다.

- css 몇줄만 추가하면 사용가능

 

ex)  헤더나 배너에서도 배경색상에서도 graient 사용가능

-주로 버튼에 사용해서 돋보이게 한다

 

원하는 컬러를 추가할수도 있고 각도, 위치도 조절 가능

radial을 사용해서 둥글게도 사용가능하다 

 

완성한 후에는 밑에 완성된 색상을 갖다 쓰면 된다.

css gradient code

 

 

 

 

 

 

 

SVG (Scalable Vector Graphics) 사용 

경로와 색상에 대한 정보를 갖고있어서 늘이거나 줄여도 깨짐없이 확인 가능한 이미지 파일이다

 

ShapeDivider.App (곡선형 section)

https://www.shapedivider.app/

Shape Divider App

 

shape divider app 사용방법

도구들에서 원하는 방식, 색상을 선택한 후에 cloud icon을 누르면 코드가 뜨는데 

복사해서 갖다쓰면 된다.

적용된 코드

 

 

 

 

 

 

Haikei  (다양한 SVG)

https://haikei.app/

Generate unique SVG design assets | Haikei

추상적인 svg들을 만들 수 있다

(원하는 색상, 각도 그라데이션등 다양한 기능이 있다)

-파일 사이즈는 이미지 파일보다 훨씬 작아서 여러개 적용 가능하다

haikei

원하는 svg모양을 만든 후 svg파일 이나 png파일을 다운로드 받아서 웹사이트에 적용하면 된다.

 

 

적용 사례 웹사이트

https://www.elegantthemes.com/(배경으로 둬서 다른 요소들 돋보이게)

https://mawla.agency/about (버튼으로도 사용 가능)

 

 

 

 

 

 

Coolbackgrounds.io (다양한 모양, 패턴의 background)

https://coolbackgrounds.io/

Cool Backgrounds

사이트에 들어가서 tool을 이용해 다양하게 적용해 본 후 다운받아서 사용하면 된다

 

 

 

 

 

 

Dribbble (다양한 웹디자인)

https://dribbble.com/

Dribbble - Discover the World’s Top Designers & Creative Professionals

다양한 웹사이트나 모바일 화면 디자인을 확인하다

 

web design tab 에서 popular를 클릭 후 다양한 디자인, 그래픽 요소들을 참고한다.

 

 

 

 

 

 

 

 

출처 https://www.youtube.com/watch?v=0Pwxh1XL-Fk&t=181s