개발 디자인을 도와줄 온라인 툴 5 + 1

이종호·2021년 10월 26일
0

CSS

목록 보기
4/5

개발 디자인을 도와줄 온라인 툴 5 + 1

  1. Color Space - https://mycolor.space/
  • 웹 사이트 만들 때 컬러 팔레트 자동 추천
  • 하나의 컬러만 픽하면, 잘 어울리는 다른 색상들을 자동으로 추천해줌
  • 팔레트 컬러 찾기 도우미
  1. CSS Gradient - https://cssgradient.io/
  • 그레디언트 자동 만들어줌
  • 이미지보다 가벼우면서 이용가능 CSS이여서 (gucci, button)
  • 사용자 눈에 더 잘 띄게 할 수 있음
  • 포인트 별 색상지정, 색상 추가, 위치 변경
  • 각도 조절
  • Raidal을 통해 동그랗게 가능
  1. Shape Divider - https://www.shapedivider.app/
  • 수평이 아닌, 비스듬히 보이거나, 곡선으로 이미지가 잘라지는 부분
  • Hot trend
  • SVG를 이용해 가능
  • 경로와 색상의 조합으로 깨짐없이 업로드 가능
  • 다양한 쉐입 선택 가능
  • Height, width
  • Flip, inver
  • Top/bottom
  • Color
  • 다운로드 icon눌러서 html, css 적용 가능
  1. Haikei (SVG) - https://haikei.app/
  • 추상적인 SVG를 만들 수 있다
  • SVG사이즈는 이미지보다 훨 작기 때문에, 로딩 시간을 단축 가능
  • 비디오 요소 뒤에 SVG 넣거나,
  • 주요 요소 뒤에 백그라운드로, 돋보이게 할 수 있다.
  • 버튼으로 사용 가능

  • 사용 방법
  • 왼쪽에서 모형 선택
  • 주사위로 랜덤으로 변경 가능
  • Png, svg가능
  • 방향, 색상, 그레디언트 선택 가능
  • 모형을 바꿀 수 있다.
  • 다운 받은 SVG를 추가하면 끝
  1. Cool Backgrounds - https://coolbackgrounds.io/
  • 독특한 백그라운드 이미지를 얻을 수 있다.
  • 패턴, 색상을 고를 수 있다.
  • 색상 팔레트 자동 지원
  • 메인 색상을 선택하면 고를 수 있다.
  1. Dribble - https://dribbble.com/
  • 다양한 웹 이나 모바일의 디자인을 확인할 수 있다
  • 좋은 아이디어를 얻을 수 있다.

  • 좋은 활용 팁
  • popular를 이용해 좋은거보기 가능
  • Good for sale로 구매 가능
  • filter로 Price를 0으로 만들어 물요 사용 가능
profile
코딩은 해봐야 아는 것

0개의 댓글