본문 바로가기

공부/tip

[일러스트레이터] 별색(spot color) 만들기 별색 컬러를 지정해 놓으면 separations preview를 통해서 해당 컬러가 사용된 곳을 손쉽게 확인할 수가 있습니다. 그럼 원하는 색상을 별색 지정하는 법을 공유해보도록 하겠습니다. 먼저 swatches에서 별색으로 지정하고 싶은 색을 클릭한 후 하단 아이콘 중에 swatch option을 클릭해 줍니다. 여기서 color type를 spot color로 수정해 주면 separations preview에 별색으로 추가된 것을 확인할 수 있습니다.
[일러스트레이터] 팬톤 컬러 찾기 인쇄물 작업을 할 때는 cmyk에서 작업을 진행하는데요. 좀 더 정확한 출력물 색상을 사용하고 원활한 색 커뮤니케이션을 위해서는 팬톤 컬러 팔레트를 사용하는 것이 좋습니다. swatches에 팬톤컬러가 없다면 라이브러리를 통해서 쉽게 추가가 가능합니다. swatches가 보이지 않으신다면 window에서 swatchs를 활성화 해주세요. swatches에서 클릭 후 하단에 swatches library menu를 클릭하면 color book이 보입니다. color book에 마우스를 오버하면 라이브러리로 제공하는 색상 리스트가 보이는데요. 여기서 원하는 색상 리스트를 선택해주면 됩니다. (참고로 가장 많이 사용하는 pantone solid는 유료화 돼서 현재는 라이브러리에 보이지 않습니다.)
[일러스트레이터] 저장하면 색이 변해요. (경고 : When spot color are used with transparency, changing them to process colors outside of illustrator can generate unexpected results.) 고객사의 파일을 전달받아서 추가 수정 후 저장하려고 하는데 아래와 같은 경고창이 떴습니다. "When spot color are used with transparency, changing them to process colors outside of illustrator can generate unexpected results." 색에 문제가 있나? 하면서 저장을 하고 다시 열어봤는데 제가 설정했던 색이 아닌 비슷한 색상으로 대체 되어 있었습니다. 알고봤더니 고객사에서 받은 파일에 별색이 문제였습니다. 팬톤 컬러로 설정해 놓은 별색을 color mode에서 핵사코드로 설정 했었었거든요. 작업할 때는 문제가 없었는데 저장 시 별색으로 지정한 팬톤과 같은핵사코드를 넣은 색에서 문제가 생겼습니다. 문제를 확인하..
[lottie] 애프터이펙트(ae)에서 로티(lottie) 설치 및 벡터 제작 주의사항 애프터이펙트에서 제작한 벡터 애니메이션을 lottie를 활용해 웹에 간편하게 올릴 수 있습니다. 애팩에서 로티 파일을 제작하기 위해서는 플러그인 설치가 필요합니다. 그럼 애팩에 플러그인 설치 방법을 먼저 알려드리겠습니다. https://lottiefiles.com/plugins/after-effects LottieFiles for After Effects LottieFiles plugin for Adobe After Effects. Render Lottie animations in real-time from within After Effects and supercharge your Lottie workflow. lottiefiles.com 위 사이트에서 zxp 파일 다운로드 합니다. 파일 다운 후 PC에..
[lottie] 간략한 로티 소개 및 사이트 링크 lottie의 탄생으로 개발자분들이 그래픽 애니메이션을 더 손쉽게 넣을 수 있는 길이 열렸습니다. https://airbnb.design/lottie/ Lottie Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. airbnb.design lottie에 대해서 자세한 정보는 위 사이트를 확인해 주세요. https://lottiefiles.com/ Lotti..
[애프터이펙트] ae에서 일러스트파일(ai) 벡터화 안될 때 애펙에서는 벡터 이미지를 살려서 모션주기가 가능한데요. ai 파일을 가져와도 픽셀화 되어 보여질 때가 있습니다. 이럴 때 체크해야하는 사항을 알려드리려고 합니다. 그럼 위 내용을 보기 전에 ai 파일을 에펙에 가져올 때 팁을 알려드리자면 고정 이미지와 움직임을 줄 이미지를 레이어 분리해서 가져오는 것이 좋습니다. 파일을 불러올 때 import 하거나 드래그앤드랍을 해주는데요. import 방식을 composition - retain layer sizes 로 가져오면 편합니다. ai 파일인데도. 이렇게 픽셀화 되서 깨진다면 switches가 활성화 되지 않아서 입니다. 레이어 ui 타이틀 상단에 우클릭해서 columms 에 들어가서 switches를 활성화 해주세요. 그럼 프로그램 최적화를 위해 가볍게 픽..
[메일폼] Google Apps Mail 이용해서 HTML form 메일보내기 서버없이 메일 보내기 php, python, ruby, java, node 같은 백엔드 서버 없이 HTML form을 이용해서 메세지를 보낼 수 있는 방법입니다. 지금부터 작성 할 내용을 따라하면 순수 html과 자바스크립트만 사용해서 간편하게 메일 보내기를 할 수 있다고 하니까 활요할 일이 많을 듯 합니다. (참고로 Google API는 하루에 보낼 수 있는 메일 수가 제한 돼있으니 메일 보내기 기능이 빈번하게 일어나는 사이트라면 이 방법은 적합하지 않을 수 있습니다.) ​ 1. 샘플 스프레드시트를 복사하기 https://docs.google.com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy 위 주소에 접속하면 "HTML Form..
[cafe24] 카페24 상품 이미지 섬네일 마우스오버 설정하기 카페24 쇼핑몰 제작 시 상품 섬네일에 마우스를 가져갔을 때 다른 이미지를 보여주는 방법을 공유하도록 하겠습니다. ※ 상품관리 1_상품관리 > 상품목록에 들어가서 상품등록 or 진열 상품을 클릭해서 들어갑니다. 2_하단에 이미지 정보로 이동합니다. 3_개별이미지등록을 클릭합니다. 4_이미지 사이즈 변경을 클릭하여 목록 이미지, 축소 이미지 사이즈를 추가하려는 이미지 사이즈에 맞게 수정해줍니다. 5_기본 상품 섬네일 이미지는 목록(medium) 이미지 입니다. 축소(small)에 마우스오버 시 노출될 이미지를 등록해 주세요. ※디자인관리 1_디자인관리에 들어가서 적용 중인 스킨에 수정을 클릭합니다. 2_상품분류 (list.html) 페이지를 열어주세요. 3_상품 이미지 노출 태그를 수정해 줍니다.
[다음 스마트워크] 도메인 이메일 주소 연결 (개인도메인으로 메일 사용이 가능한 무료기업메일) 요즘 저처럼 개인 도메인을 메일 주소로 활용하고 싶으신 분들을 많으실 텐데요! 그런 분들에게 도움이 될만한 무료 서비스를 찾아서 공유해보려고 합니다. 바로 다음(DAUM) 스마트워크 인데요 구글이나 네이버에서도 이런 서비스를 제공해주긴 하는데 유료 혹은 유료 예정 서비스라서 저는 다음 스마트워크를 선택했어요! http://mail2.daum.net/hanmailex/domain.html 다음 스마트워크 사이트에 접속해서 신청하기를 진행하던가 다음 메일에 접속해서도 스마트워크 서비스 신청을 할 수 있는데요 하단에 DAUM 스마트워크 버튼을 클릭하면 위와 같은 화면이 뜹니다! 자신에게 맞는 카테고리의 신청하기 버튼을 클릭해주세요~ 그럼 도메인 입력란에 자신이 소유한 도메인을 기입하고 다음 단계로 넘어가 주세..
[웹버튼] 버튼 종류 웹사이트를 제작하다 보면 빼먹을 수 없는 버튼!! 이 웹버튼에도 속성과 공식이 있는데요~ 아래 내용을 보면서 웹 버튼의 종류, 속성, 팁에 대해서 알아볼까 합니다. 먼저 버튼은 3가지 종류로 나눌 수 있습니다 1. positive : 화면의 변화를 주거나 정보를 추가하는 버튼 ("전송" "확인" "더보기" 등) 2. Neutral: 화면의 변화가 없거나 되돌아가는 버튼 ("취소"버튼 등) 3. Negative: 삭제, 리셋, 추가 정보를 차단하는 버튼 positive action button : positive 버튼은 주목성을 높이는 것이 중요합니다. Negative action button : Negative 버튼은 명암 차 등을 이용해서 positive 버튼보다 눈에 덜 띄게 디자인합니다. Neutr..
[해상도] 아이폰 해상도 오늘은 아이폰 해상도에 대해서 알아볼까 합니다. 아래 내용은 iOS Human Interface Guidelines에서 가져온 표입니다. 링크를 타고 들어가야 하는 부분이 있어서 하단에 Launch file or image 만 따로 정리하였습니다. 자세한 내용은 iOS Developer Library 사이트에서 확인 가능합니다. CLICK ▶ For iPhone 6: •750 x 1334 (@2x) for portrait •1334 x 750 (@2x) for landscape For iPhone 6 Plus: •1242 x 2208 (@3x) for portrait •2208 x 1242 (@3x) for landscape For iPhone 5 : •640 x 1136 For iPhone 4s : •..
[나인패치] 앱 제작 시 디자이너에게 유용한 나인패치 앱 제작 시 수많은 디바이스 별로 이미지를 슬라이스 해줘야 하는데요. 이때 유용한 것이 바로 나인패치 입니다. 예를 들어 아이폰의 문자 기능 중에 말풍선 같은 경우에 가로사이즈가 안에 들어가는 텍스트에 따라서 유동적으로 움직여야 합니다. 이럴 때 나인패치를 사용하게 되는데요. 밑에 이미지를 보면서 설명드리겠습니다. 1번의 배경이 투명한 이미지를 등록한다고 했을 때 가로 사이즈가 늘어나면 2번 이미지처럼 늘어나게 됩니다. 이때 3번 이미지처럼 보기 좋게 늘어나도록 고안된 것이 바로 나인 패치 도구라고 할 수 있습니다. 이때 참고하셔야 할 것이 나인패치로 저장된 파일명은 꼭 "파일명.0.png "여야 합니다. 나인패치 툴로 조작하는 것도 좋지만 간단하게 웹에서 변환 가능한 방법이 있어서 소개해 드릴까 합니다..
[오디오 변환] wav mp3 변환 사이트 wav 파일을 mp3로 전환해야 하는 작업이 필요해서 검색하다가 좋은 사이트를 찾아서 포스팅해보려고 합니다. http://media.io 라는 사이트인데요. 이 사이트는 mp3, wav, wma, ogg 등의 오디오 파일을 프로그램 설치 없이 웹사이트 상에서 확장자를 바꿔줍니다. 사이트에 접속하면 위와같은 화면이 보이실 텐데요. 1번에 select files to upload 버튼을 눌러서 가지고 있는 오디오 파일을 업로드합니다. 그 후에 2번 output format에서 변환하고 싶은 확장자를 설정해 줍니다. 3번 select quality는 음질 설정이니 원하시는 것을 선택해주세요. 숫자가 높을수록 음질이 좋습니다. 설정이 다 끝나시면~ 4번 convert를 클릭하면 끝!!
[닉컬렉션] 사진보정프로그램 무료배포 "구글 닉컬렉션" 사진 보정 프로그램 구글 닉컬렉션 전면 무료화!!!! 닉컬렉션(Nik Collection)은 원래 149달러에 판매되고 있는 유료 사진 보정 프로그램(플러그인)인데요~ 구글에서 인수하면서 현재 무료로 배포 중이에요! 사진 좋아하고 편집해야 하시는 분들은 어서 무브 무브!! (전면 무료화라고 해도 언제 유료로 다시 전환될지 모르니.. 파르르) 무료로 배포한다고 그저 그런 플러그인이라고 생각하실 수 있는데요. 절대 아닙니다! 닉컬렉션은 포토그래퍼나 전문가들이 가장 많이 사용하는 플러그인이라는 사실!! 일단 믿고 경험해 보시는 게 좋을 거 같아요! ※ 닉컬렉션 구성 ∙ 아날로그 Efex 프로 - 클래식 카메라, 필름, 렌즈의 느낌 ∙ 색상 Efex 프로 - 색상 수정, 보정, 특수 효과를 위한 종합 필터 세트..
[움짤만들기] 동영상, 사진으로 설치없이 간편하게 GIF 만들기! 요즘 포스팅을 하다 보니 움짤이 필요한 경우가 슬슬 생기더라고요~ 그래서 편히 움짤 만드는 법이 없나 하고 찾아보다가!! 설치 없이 간편하게 웹에서 만드는 방법이 있어서 포스팅을 해보려고 합니다. http://ezgif.com 이 사이트인데요~ 위 사이트에 가시면 이미지, 동영상 원본을 가지고 바로 움짤 gif 제작이 가능합니다. 먼저, 이미지로 움짤을 만드는 방법!! http://ezgif.com/maker 에 접속하시면 아래와 같은 화면이 나타납니다. 그럼 select images에 찾아보기를 클릭해서 이미지들을 업로드한 후에 파란색 Upload 버튼을 눌러주세요! 이미지를 확인하고 디레이 타임을 조정한 후에~ animate it 버튼을 클릭해주세요!! 완료가 되면 하단 부분에 옵션, 리사이즈, 스피..
[폰트] tiff,eot,woff 변환하기 ttf 파일을 웹폰트로 적용하기 위해서는 eot, woff 파일 과정을 꼭 거쳐야 합니다. 그럼 ttf 파일을 eot, woff 로 간단하게 변환하는 방법을 설명해 드리도록 하겠습니다. 첫 번째, ttf 폰트를 eot로 변환하기 http://eotfast.com 사이트에 접속하면 위와 같은 화면이 나오는데, free dounlode 버튼을 클릭해서 파일을 다운로드합니다. 압축을 풀면 위와 같이 파일들을 볼 수 있는데요. 별도의 설치나 실행 없이 ttf 파일을 EOTFAST-1.exe 에 끌어다 올려놓으면 자동변환이 됩니다. 두 번째, ttf 폰트를 woff로 변환하기 http://people.mozilla.org/~jkew/woff 사이트에 접속하면 위와 같은 화면이 나오는데, 윈도우 사용자는 for W..
[윈머지] WinMerge 프로그램 소스 비교 프로그램 퍼블리싱을 하다 보면 소스 비교가 절실할 때가 옵니다. 이걸 양쪽에 켜놓고 하나하나 눈으로 찾다 보면 찾기도 힘들뿐더러 사시 눈이 되겠죠?! 이럴 때 유용하게 사용할 수 있는 프로그램이 있어서 가져왔어요~ 윈머지 (WinMerge)라는 프로그램인데요. 소스를 불러오는 것만으로도 양쪽 시트의 차이점 분석이 가능하고 카피 기능도 있어 소스 비교가 아주 편리했습니다. 먼저 프로그램은 아래 사이트에가서 다운로드하여 주세요. http://winmerge.org 사이트에 접속하면 위와같은 화면이 보입니다. 녹색의 다운로드 버튼을 클릭하고 다운로드한 후에 설치를 해주세요! 윈머지를 실행하면 위와같은 화면이 나오는데요. 빨간색으로 체크한 폴더 모양 아이콘을 클릭하시면, 위와 같이 파일 선택 창이 나타납니다. 비교할 두..
[해상도] 모바일 사이즈 가이드 모바일 해상도 사이즈 가이드 스마트폰의 보급이 확산되고 무수히 많은 제조사들의 합의가 이뤄지지않은 해상도 덕분에 디바이스의 사이즈가 어마무시하게 다양해지고 있는데요~ 이런 디바이스 문제로 인해 디자이너들은 사이즈 별로 디자인 작업을 따로 하거나 반응형으로 디자인을 하고 있습니다. (아하하하...해상도가 다 재각각이야...아하하...다 달라...하하하하하...하하하) 그래서 오늘은 저 처럼 다양한 디바이스 해상도로 인해서 고생하는 디자이너분들을 위해서 "모바일 작업 사이즈" 및 해상도, 팁을 정리해 보려고 합니다. * 아이콘 사이즈(정사각형) -안드로이드 : 36px, 48px, 72px, 76px, 96px, 144px, 512px -아이폰 : 29px, 57px, 58px, 80px 114px 120p..
[JS 변환] jsbeautifier js파일을 보다 보면. min으로 압축된 파일을 볼 수 있습니다. (전 처음에 그거보고 무슨 암호인 줄;;;;;) 압축을 하는 이유는 용량을 줄여 속도를 조금 더 빠르게 하기 위함인데요~ 저와 같은 까막눈 디자이너는... 이럴 때 눈을 감아버려!!! 완전히 꼭 감아버려!!! (가독률 문제가 아닌... 아예 이해 자체를 못하는 비루한 인간...) 이런 저를 위한 아름다운 사이트를 발견했습니다!!! http://jsbeautifier.org 접속하면 보이는 화면입니다~ 철저하게 디자인을 무시한 화면 때문에 많이 당황하셨죠? 무심코 이 사이트에 접속했다면 아마도 이상한 사이트인 줄 알고 냅다 화면을 껐을 거예요! ㅋㅋㅋ 다른 것들은 딱히 만지실 필요도 없고요~ (사실 다른 건 몰라서 눌러보지도 않았습니다 ㅋㅋ..
[소스] 로딩 GIF 인트로 페이지나 로딩 페이지를 만들 때 로딩을 표현해 줄 GIF 소스가 필요하죠?!! 그럴 때는 포토샵에서 이미지를 제작 후 애니메이션 타임라인에서 프레임을 생성해서 loof로 제작하거나, 에프터 이펙트에서 간단하게 만들어서 GIF로 랜더링을 하는데~ 시간적으로 여유가 없거나, 자체 제작이 힘들때는 아래 사이트를 이용해 보세요. http://www.ajaxload.info 위 사이트에 들어가면 손쉽게 다양하고 이쁜 로딩 GIF를 만들고 다운로드하실 수 있습니다. 사이트에 접속하면 위와 같은 귀여운 화면이 보이실텐데요~ indicator type에서 원하는 로딩 이미지를 선택하고 (원형에서 바형식 등 약 40가지 종류가 있습니다), backfround color에서 배경 칼라를 정하고, foreground..

티스토리툴바