본문 바로가기

IT/디자인(Design)29

[디자인-color] 색상 참고 사이트 1 디자이너에게 색상 표현은 굉장히 중요한 부분이다. 아래 사이트에서는 색상표현 및 어울리는 컬러 서칭등으로 색상표현에 참고 할 수 있다. 1. Adobe color Adobe color는 비핸스 또는 Adobe Stock 의 선별된 피드를 통해 색상을 추출 해 준다. 또한 AI기반으로 행복, 평화로운등의 상황별에 따른 컬러도 추출 해 준다. https://color.adobe.com/ko/explore/ Color wheel, a color palette generator | Adobe Color color.adobe.com 위 검색화면에서 "happy" " skyblue" 형태로 컬러를 검색하면 해당 상황에 어울리는 색상을 검색해 준다. 마음에 드는 컬러조합을 발견 해 상세페이지를 보면 색상 모드 및 코.. 2020. 1. 6.
[스케치] Sketch 이미지 해상도별로 저장하는 법 디자인을 제플린으로 공유하여도 개발자분들이 직접 이미지를 다운 받을 수 있지만, 디자이너가 레이어명을 모두 정확하게 정리 해야하고 다운 받을 시 작업에 꼭 맞는 형태가 되지 않을 경우도 있기에 편리하고 빠르게 추출되는 스케치에서 작업 후 따로 보내 주는 것이 좋다. 전체적으로 한번에 저장하는 방법도 있지만, 진행하다 보면 내가 필요한 이미지만 추출하는 것이 편할 때도 있기에 그 방법에 대해 설명하려고 한다. 상단 이미지 상에서 만약 파란색 상단바 안의 돋보기 아이콘을 저장하고 싶다면, 그림과 같이 마우스로 돋보기 아이콘을 선택한다. 그런 후 오른쪽 패널에서 MAKE EXPORTABLE 버튼을 선택한다. 처음 Artboard 작업 형태에 따라 ios에 맞는 해상도 또는 Android에 맞는 해상도 별로 적.. 2019. 12. 26.
[스케치 무료소스 사이트] Sketch APP SOURCES 신입 디자이너라면 처음 작업을 할때 막막할 때가 있다. iOS는 어떤 UI 기준을 해야하고 Android는 또 어떻게 해야할지... 또 경력 디자이너들은 알더라도 기본 화면 UI를 일일이 그려서 시작하려면 피곤하기도 하다. Sketch APP SOURCES 사이트로 가면 쉽게 원하는 기본 UI 템플릿 부터 UX 디자이너에게 필요한 와이어프레임까지 쉽게 무료로 다운 받을 수 있다. https://www.sketchappsources.com/ Sketch App Sources - Free design resources and plugins - Icons, UI Kits, Wireframes, iOS, Android Templates for Sketch Sketch App Sources is the large.. 2019. 9. 25.
[제플린]zeplin - 디자인 모바일, 웹 가이드 프로그램 사용방법- 작업한 시안 제플린으로 보내는 방법 이전과정에서 제플린을 설치했다면, 스케치에서 작업한 시안을 내보내는 방법은 다음과 같다. 우선 원하는 시안을 드래그해서 선택 후 플러그인->제플린-> Export Selected를 누르면 제플린에 가이드 화면이 추출 된다. 만약 포토샵에서 하고 싶다면 우선 포토샵 화면에서 레이어를 생성할때 원하는 사이즈 입력 후 아트보드 부분에 체크를 해야한다. 그런 후에 시안 작업을 해야 한다. 그런후 window-> extensions->zeplin을 클릭 후 뜨는 화면에서 원하는 설정 후 공유하면 추출 된다. 제플린에 내보내기 하면 제플린에서 시안을 확인 할 수 있고 이미지 영역을 클릭하면 해당 부분 가이드를 확인 할 수 있다. 색상이나 px 값을 확인 할 수 있다. 개발자 분들은 개발 코드도 확인이 가능하다. 화.. 2019. 9. 10.
[제플린]zeplin - 디자인 모바일, 웹 가이드 프로그램 사용방법 모바일 작업에서 개발자와의 협업을 위한 디자인 가이드 작업은 필수이다. 제플린이 나오기 이전에는 수작업으로 가이드를 ppt로 문서화 해야했기 때문에 시간도 많이 들었고 그에 따라 야근도 많이 했던 기억이 난다. 하지만 제플린이 나오면서 가이드 작업이 굉장히 쉬워지고 편리해졌다. 제플린은 스케치, 포토샵, XD, Figma 에서 작업 후 가이드를 추출할 수 있다. https://zeplin.io/ Zeplin Connected space for product teams. Handoff designs and styleguides with accurate specs, assets, code snippets—automatically. zeplin.io 우선 제플린을 이용하기 위해서는 회원가입을 해야한다. 회원가.. 2019. 9. 10.
[디자이너 퍼블리싱]코드 정리 사이트, 코드 한줄로 만드는 사이트 코드를 정리해 주는 사이트 https://tools.arantius.com/tabifier Tools - Tabifier (HTML and CSS code beautifier) - Arantius.com Tabifier The tabifier is a tool to properly indent computer code. The style it produces is a mix of my personal preferences for indentation plus what I could manage to make a program produce from dirty source. The tabifier currently supports CSS, HTML, and tools.arantius.com html 작업시.. 2019. 9. 9.
[디자이너 필수 사이트]Android MATERIAL DESIGN 구글 MATERIAL DESIGN https://material.io/ Homepage Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io 안드로이드 디자인 할때 필수 참고 사이트이다. 앱아이콘 어플 사이즈등 꼭 봐야하는 가이드들이 나와 있다. 유명한 앱 또는 사용자가 많이 사용하고 있는 앱의 컬러 특징은 파스텔 컬러나 어두운 컬러가 아닌 vivid color를 주로 메인 컬러로 사용하고 있다. 메트리얼 디자인 사이트는 특히 색상을 선택할 때 편.. 2019. 9. 6.
[무료 이미지 사이트] 사진 이미지 전문 픽사베이(pixabay), 무료 일러스트 파일 프리픽(freepik) 1. 무료 이미지 사이트 (사진 이미지) 픽사베이 https://pixabay.com/ko/ 놀라운 무료 이미지 - Pixabay 놀라운 무료 이미지 우리의 관대한 커뮤니티를 통해 공유되는 1.7 백만개의 이미지와 비디오를 살펴보세요. 인기 있는 이미지: 가을, 배경, 사람, 하늘, 달, 고양이, 바다, 꽃, 자연, 나무, 여자, 우주 pixabay.com 이미지 전문 무료 사이트로 고퀄리티 이미지들이 많이 있어서 좋다. 예전에는 영어검색만 가능했던 것 같은데 언제부터인가 한글검색도 가능하다. 우측 빨간 상자를 보면 상업적 용도로 사용 가능 하다고 나와있다. 해당 부분을 한번 더 클릭해서 들어가보면 좀 더 자세한 라이센스 사항이 나와 있다. 해당 이미지를 동일하게 다른 플랫폼 또는 오프라인 상에서 재판매.. 2019. 9. 3.
[오지큐마켓] 오늘의 크리에이터 오지큐마켓 오늘의 크리에이터! 스티커 심사 후 바로 뒷페이지로 쭉 넘어가 있어 약간 실망했었는데 갑자기 몇일 사이에 오늘의 크리에이터로 선정되어 메인 맨 앞 화면에 노출 되게 되었다.~!! 역시 열심히 하다보면 이런날도 오는구나 싶어 기분이 정말 좋았다.! 오늘의 크리에이터로 선정 되면 메일로 축하메일이 온다. 7일간 노출되므로 평소보다 매출 상승효과와 오지큐플랫폼의 팬들이 생길 수 있다. 선정기준은 잘 모르겠지만, 꾸준히 한다면 한번쯤 누구나 선정될 수 있을 것 같다.! https://20aileen.tistory.com/32?category=858210 [오지큐마켓] 내가 그린 스티커 쉽게 오픈할 수 있는 플랫폼 오지큐마켓 스티커는 네이버 블로그 또는 카페에서 사용이 가능하다. 네이버 블로그 글을 쓸.. 2019. 8. 31.
[오지큐마켓] 내가 그린 스티커 쉽게 오픈할 수 있는 플랫폼 오지큐마켓 스티커는 네이버 블로그 또는 카페에서 사용이 가능하다. 네이버 블로그 글을 쓸 때 사용하거나 댓글로 사용할 수 있다. 카카오톡 보다 심사과정이 까다롭지 않아 누구든 마음 편하게 도전하기 좋은 플랫폼이다. https://ogqmarket.naver.com/ 네이버 OGQ마켓 네이버 OGQ마켓에서 여러분도 크리에이터가 될 수 있습니다. 네이버 OGQ마켓은 여러분의 창작활동을 응원합니다! ogqmarket.naver.com 우선 위의 url로 접속하여 네이버 계정이 있다면 바로 로그인이 가능하다. 상단 업로드 아이콘을 누르면 컨텐츠를 업로드 할 수 있다. 올리는 방법은 이렇게 자세하게 나와 있으므로 가이드에 맞게 열심히 캐릭터를 그리기만 하면된다~! 스티커이미지를 아래와 같이 24개를 그려주면 된다.. 2019. 8. 29.
무료 아이콘 사이트 및 아이콘 정리 방법 1. 무료 아이콘 사이트 ICONFINDERhttps://www.iconfinder.com 위의 url 클릭 시 아이콘파인더 사이트로 이동한다. - 검색란에 원하는 아이콘을 영문으로만 입력하여야 한다.ex) book 상단 좌측 메뉴 부분에 Free -> Vector 를 클릭하면 무료 벡터 파일 (확대해도 해상도가 깨지지 않는 파일) 만 검색이 되고 원하는 아이콘 상세화면 클릭 시 무료 아이콘을 다운 받을 수 있다. Free 아이콘 이어도 각 라이센스 조건이 조금씩 다르기 때문에 상세내용 확인 후 사용 하는 것이 좋다. IconJarhttps://geticonjar.com/ MAC에서 사용 가능한 아이콘 정리 프로그램 위의 사이트에서 프로그램을 다운로드 받아 아이콘을 정리 할 수 있다. 무료 시험판 사용 .. 2019. 3. 12.
스케치(Sketch) 플러그인 설치 방법 스케치 플러그인 다운로드 사이트 https://www.sketchapp.com/extensions/plugins/ 해당 사이트 검색란에 원하는 플로그인을 검색 후 다운받아 zip파일 압축을 푼다. 파일 중 .sketchplugin 확장자를 가진 파일을 더블클릭하면 스케치에 자동 설치 된다. 또는 ---------------------------------------------------------------------------------------------------------------------------- 스케치 화면에서 Plugins -> Manage Plugins 를 선택 후 Get Plugins 버튼을 클릭하면 위와 동일한 형태의 사이트에 접속 후 동일한 방법으로 사용 가능하다. 2019. 3. 5.
MAC 으로 작업한 스케치작업물을 모바일로 보기- Sketch Mirror MAC 으로 작업한 스케치작업물을 모바일로 보기 위해서는 Sketch Mirror를 앱스토어에서 받아 보아야 한다. 스케치 클라우드 아이디와 패스워드를 입력 후 접속한다. 컴퓨터에서 작업한 파일을 모바일에서 보기 위해서는 다음과 같은 두가지 사항이 충족되어야 한다. Wi-Fi 또는 USB 케이블로 모바일과 컴퓨터를 연동해서 사용 가능하다. 아이디 패스워드 접속 만으로는 확인이 불가능하므로 불편한 점이 있다. 또한 항상 버전은 최신버전으로 업데이트 되어있어야 사용상 문제가 발생하지 않는다. 2019. 2. 26.
스케치(sketch) 일부 기능 정리 및 단축키 스케치(Sketch) 일부 기능 정리 및 단축키 1. 자동저장 기능 메뉴중 Sketch -> Preferences -> Auto Save (check) 2. 버전 컨트롤 File -> Revrert to -> Browse All Vesions ---> 버전 선택 후 --> Restore 버튼 클릭 (이전/ 최근 버전으로 이동이 가능하다.) 3. 다른 이름으로 파일 저장하기 스케치에서는 save as 가 아닌 File -> Duplicate 파일이 복제 되면 원하는 파일명으로 변경 4. 아트보드 생성하기 화면상에 단축키 [A] 버튼을 누르면 오른쪽 패널 생성 5. Page 영역 그룹화 하기 및 이름 변경 하단 왼쪽 메뉴 선택 후 그룹화 할 레이어 shift로 여러 개 선택 후 단축 키 command + G.. 2019. 2. 26.

티스토리툴바