본문 바로가기

디자인 스킬

DPI 스터디 (V1) V1 (190411) DPI 스터디 모니터 해상도, 인치 기반 DPI 계산 DPI계산 웹사이트(1): https://www.sven.de/dpi DPI계산 웹사이트(2): https://www.pixelcalculator.com (기능 제한적, 인쇄 쪽 내용 포함) DPI계산 웹사이트(3): https://www.pxcalc.com DPI계산법 설명 문서: http://nm3.kr/old/46 모니터 DPI감지 및 측정 웹사이트: https://www.infobyip.com/detectmonitordpi.php 픽셀 픽셀 정의: https://namu.wiki/w/픽셀 픽셀 크기 계산기: https://www.pixelto.net/px-to-cm-converter 픽셀은 절대적 크기를 갖지 않고, 그 '..
스케치에서 단축키 변경하기 스케치는 묘하게 일반적인 그래픽 프로그램의 인터페이스와 다른 단축키 구성을 가지고 있습니다. 그게 참 묘하게 달라서, 다른 프로그램에서 넘어 온 작업자들의 경우 단축키를 커스텀해야 하는 상황에 놓일 수가 있습니다. 다음은 스케치에서 단축키를 변경하는 방법에 대해 소개하고, 변경하면 좋은(조금 더 유니버셜한 그래픽프로그램 단축키 인터페이스에 근접하는) 단축키들을 소개하고자 합니다. 스케치 단축키 변경하기 일단 스케치 앱 내에서는 단축키 변경이 불가합니다. 시스템에서 설정을 해 주어야 하는데 이를 위해 맥의 시스템 환경설정을 실행해야 합니다. 환경설정에서 키보드 항목을 실행해야 합니다. 다음으로 스케치를 실행해서, 단축키를 맵핑하고 싶은 커맨드 이름을 확인합니다. 저는 지금 Fit to 100% 단축키인 A..
일러스트레이터 compound path & compound shape, path & shape 비교 Compound Shape과 Compound Path Compound Path와 Compound Shape 모두 원래 Shape을 Editable하게 유지하면서 조합을 통한 새로운 조형을 이룰 때 사용. Compound Shape는 Unite, Minus, Interact, Exclude 등 다양한 조합 가능하며 레이어 상으로 하위 개체를 생성함. Compound Path는 Exclude 조합만 가능하며 레이어 상으로 하나의 개체로 처리됨. Compound Path와 Shape 모두 Release하여 조합 이전 조형들을 복원하는 것이 가능하나 Shape이 아닌 Path 형태로 복원됨. Compound Path가 더 일반적인 Vector 그래픽 형태이나 기능성에 제약이 있음. Compound Shape은 ..
모바일용 이메일 디자인을 할 때에 주의해야할 점 5가지 *본 포스트는 "SITE-POINT'에 게재된 " CHRIS COYIER"가 쓴 "5 Golden Rules For Mobile Email Design"이라는 포스트를 국문으로 번역하여 더 많은 사람들에게 정보를 알리고자 하는 목적으로 저작된 포스트임을 밝힙니다. 모바일용 이메일 디자인은 단순히 작은 크기를 고려하여 디자인하는 것이 아니라, 사람들이 모바일웹을 사용하는 다양한 방식들을 고려해서 진행되어야 합니다. 모바일용 이메일 디자인에 있어서 필요한 요소들을 알아 보겠습니다. 1. 이메일은 최대한 단순하게복잡성은 모든 것을 망칩니다. 특별히 이메일에서는 더욱 그렇습니다. 작은 스크린 내에서 깨지기 쉬운 복잡한 구조는 언제든 피하도록 합니다. 또한 모든 모바일 스크린은 '미디어 쿼리(CSS)'를 지원하지..
큰 이미지를 여러 장으로 자동으로 나누어서 출력하는 법 포스터 및 현수막 등 사이즈가 큰 작업물에 대한 인쇄 작업을 진행할 때는 실제 크기의 작업 결과를 확인하기가 힘들 때가 있습니다. 그런 경우 일반적인 작업 환경에서 할 수 있는 방법으로 A4나 A3 사이즈의 용지로 분할인쇄하는 것이 있습니다. 분할인쇄의 경우, 이미지를 수동으로 분할하는 과정이 매우 귀찮은 작업이 될 수 있는데, Adobe Acrobat(또는 Adobe Acrobat Reader)를 통해서 이 작업이 쉽게 가능합니다. 일반적인 작업 포맷인 PSD, AI, TIFF 등의 이미지 원본 파일을 PDF 포맷으로 EXPORTING합니다. 그 다음에는 PDF파일을 열은 후, 위 이미지에서 보이는 것처럼 인쇄 버튼을 누르면 뜨는 인쇄 다이얼로그에서 POSTER 인쇄 방식을 선택하면 자동으로 선택된 용..
ico 파일 포토샵에서 열기, ico 패키지 파일 만들기, ico 편집 프로그램 소개, ico 비트 수 설정하기 파비콘이나 윈도우 프로그램용 아이콘을 만들 때는 ICO 포맷의 파일 제작이 필요합니다. ICO 포맷의 경우 전용 에디팅 프로그램이 딱히 없는 실정인데요. 이를 포토샵에서 편집하고, 또 ICO파일의 특성인 패키징 파일(하나의 파일에 여러 개의 ICO 파일이 있는 경우)를 위해서는 별도의 프로그램 활용이 필요합니다. 포토샵으로 ICO파일 열기1. ICO FORMAT(포토샵용 ico 파일 플러그인)을 텔레그래픽스 홈페이지에서 다운 받습니다.* 다운로드 URL : http://www.telegraphics.com.au/sw/product/ICOFormat * 32비트, 64비트 및 7 이상용을 잘 구분하여 자신에게 맞는 운영체제의 파일을 다운 받도록 합니다. 2. 포토샵이 설치된 디렉토리의 plug-ins 폴더..
웹디자인을 쉽게 해줄 7가지 폰트아이콘 소개 *본 포스트는 "SITE-POINT'에 게재된 " CHRIS COYIER"가 쓴 "5 Golden Rules For Mobile Email Design"이라는 포스트를 국문으로 번역하여 더 많은 사람들에게 정보를 알리고자 하는 목적으로 저작된 포스트임을 밝힙니다.*본 포스트는 2012년에 기재된 포스트로서 현 시점에서 내용과 다소 차이가 있을 수 있으나, 현재에도 유용한 정보를 담고 있다고 판단하여 번역하는 내용이니 이에 참고 바랍니다.2012년 초 TNW에서는 폰트아이콘(icon font)의 사용세가 증가함을 보고 드린 바 있습니다. 폰트아이콘에 대해서 아직 잘 모르시는 분들을 위해 설명 드리자면, 과거 딩뱃폰트의 실용적인 형태의 업그레이드 버전이라고 보시면 될 것 같습니다. Pictonic에 설명에 ..
웹디자인에 팬톤 컬러 적용을 위해 활용 가능한 웹사이트 소개 지난 번에 팬톤에서 제작한 컬러 어플리케이션을 소개해 드린 적이 있는데요. 이번에는 데스크탑/노트북 상에서 웹/앱 디자인을 할 때 컬러링 관련해서 활용이 가능한 웹사이트들을 소개해 드리고자 합니다. 이전 모바일 앱과 마찬가지로 팬톤과 관련된 웹사이트들로 컬러 팔레트 및 파인더 역할을 합니다.1. 팬톤 웹 컬러파인더팬톤 공식 홈페이지에서 제공하는 컬러파인더입니다. 컬러피커를 통해서 색상을 지정하면 그 색과 가장 유사한 팬톤컬러를 뽑아주는 역할을 합니다. 막연하게 색상을 구상하고 있을 때, 구체적이고 또 검증된 색상 코드를 표시해 주는 역할을 합니다.URL : https://www.pantone.com/color-finder 2. 팬톤 컬러스팬톤 표준 색상들을 한 눈에 알아 보기 쉽게 나열하여 보여주는 웹사..