본문 바로가기

반응형
디자인
반응형
148

[일러스트레이터] 일러스트레이터에서 표 삽입하기 안녕하세요. 당근입니다. 오늘은 어도비 일러스트레이터에서 표를 삽입하고 만드는 법입니다. 간단하니까 빨리 실습으로 넘어가보죠. 표 만들기는 일러스트 도구의 선 도구를 클릭하고 있으면 나옵니다. Rectangular Grid Tool을 선택하세요. Rectangular Grid Tool Options에서 Dividers 탭에서 행과 열의 수를 지정합니다. Divider기 때문에 칸의 수가 아닌 나눠지는 값을 입력해야합니다. 예를 들어 4칸을 하고싶다면 Dividers의 값은 3이 되겠죠. 3을 입력해서 행과 열이 4칸으로 나눠지는 표를 만들어보겠습니다. 이렇게 4x4의 표가 만들어졌어요. 클릭해서 들어간 다음 간격들을 수정하시면 됩니다. 큰 사각형 안에 선으로 구분되어 있기 때문에 칸 별로 색을 넣는다거나.. 2020. 3. 24.
[포토샵]스마트 오브젝트를 활용하여 이미지 손쉽게 합성하기(psb파일) [포토샵]스마트 오브젝트를 활용하여 이미지 손쉽게 합성하기(psb파일) 안녕하세요. 당근입니다. 오늘은 이미지를 반복적으로 합성할 때 유용한 포토샵 팁을 가지고 왔습니다. 어떤 상황인지 간단히 설명해보겠습니다. 예를 들어 회사에서 사원증과 같이 포맷이 동일한데 포토샵 작업 파일에 포함된 이미지만 반복적으로 바꿔야하는 일이 있다면 이미지 사이즈를 어떻게 조절하시나요? 사이즈가 제각각인 이미지들을 같은 자리에 같은 크기로 합성하려면 일일이 크기를 줄이고 비율을 조정하고 크롭해서 올려야할까요? 이럴 때 이미지를 스마트 오브젝트로 만들어서 활용하면 손쉽게 이미지를 합성하실 수 있습니다. 해당 스마트 오브젝트를 클릭하면 열리는 psb파일에서 이미지를 갈아끼워주고 저장하면 원래 psd파일에 반영이 되는 식이죠. 과.. 2020. 3. 23.
웹브라우저 기반 가벼운 3D 제작 프로그램 : 벡터리(Vectery) 웹브라우저 기반 가벼운 3D 제작 프로그램 : 벡터리(Vectery) 안녕하세요. 별도의 프로그램 설치 없이 웹 브라우저에서 간단한 3D를 제작할 수 있는 툴이 있다는 것을 알고 계시나요? 오늘은 바로 그 주인공 벡터리(Vectery)를 리뷰해보겠습니다. 1. 가격 무료로는 3개 프로젝트를 이용할 수 있습니다. 3가지 프로젝트로 무료로 경험해보신 후 더 많은 프로젝트가 필요하거나 더 향상된 기능을 사용하시고 싶으시다면 플랜을 구입하시면 되겠죠. 2. 이용방법 벡터리 공식 사이트에 접속하세요. https://www.vectary.com/ Vectary – The Easiest Online 3D Design and 3D Modeling Software Turn ideas into a 3D design wit.. 2020. 3. 22.
피그마figma 데스크탑 앱으로 설치하기 및 작업파일(*.fig)로 공유하기 피그마figma 데스크탑 앱으로 설치하기 및 작업파일(*.fig)로 공유하기 안녕하세요. 당근입니다. 오늘은 평화로운 웹서핑을 하던 도중 어부지리로 알게된 피그마 사용법을 한번 공유해보려고 합니다. 아시다시피 피그마figma는 스케치, 어도비XD등과 같은 UI 디자인 프로토타입 툴이죠. 피그마의 기본적인 세팅과 사용법을 알고싶으신 분들은 아래 포스팅을 확인해보세요. UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 및 버튼 만들기 UI 프로토타이핑 툴 피그마(Figma) - 2. 프로토타이핑 및 개발 도구 0. fig파일이 무엇인고? 디자인 관련 자료들을 보다가 피그마로 제작된 디자인 에셋 파일을 무료로 받을 수 있더라구요. 그래서 오 피그마 연습해볼겸 한번 받아볼까? 하고 받았더니 fig파일로 다.. 2020. 3. 18.
[포토샵] 포토샵 일반 도큐먼트에서 아트보드 형식으로 전환하기 포토샵 일반 도큐먼트에서 아트보드 형식으로 전환하기 안녕하세요. 당근입니다. 포토샵이 CC부터 일러스트처럼 한 파일에서 다수의 아트보드를 만들어서 작업할 수 있게끔 바뀌었잖아요. 처음에 파일을 열 때 사이즈 입력란 옆에 아트보드 항목을 체크하시면 아트보드 형식으로 편집하실 수 있어요. 그러나 디폴트는 체크가 해제되어있기 때문에 종종 작업하다가 일반 도큐먼트를 아트보드 도큐먼트로 전환하고 싶을 때가 생깁니다. 먼저 아트보드를 만들 요소를 그룹으로 묶어줍니다. 그리고 레이어창에 해당 그룹 우클릭 - Artboard from group을 선택하세요. 이렇게 아트보드로 만들어지네요! 미리보기용 시안과 따로 뽑아낼 요소를 아트보드로 정리해두면 작업하기도 편하고 출력할 때도 export로 한번에 출력하면 되니까 정.. 2020. 3. 14.
[피그마figma] 텍스트 길이에 따라 변하는 플렉서블flexible 버튼 만들기 [피그마figma] 텍스트 길이에 따라 크기가 변하는 플렉서블flexible 버튼 만들기 안녕하세요. 당근입니다. 오늘은 간단하지만 되게되게 유용한 피그마 튜토리얼입니다. 저도 요즘 피그마에 적응중이라 차근차근 해보면서 가끔은 삽질도 하면서? ... 공부해나가는 중입니다. 오늘은 버튼을 만들어볼건데 텍스트를 기준으로 여백을 유지하면서 자동으로 크기가 늘어나는 버튼을 만들 것입니다. 이렇게 말이죠. 먼저 버튼을 만들고 Create Component 해줍니다. 버튼 안에 있는 텍스트의 위치가 박스의 중앙에 위치하도록 Constraints를 설정합니다. Paragraph도 가운데 정렬해주셔야 텍스트 수정할 때 용이하겠죠. 텍스트의 가로크기를 확인하신 다음 박스를 다시 선택하시고 텍스트 크기+양옆 여백(패딩)을.. 2020. 3. 3.
[일러스트레이터] 블렌더 툴로 입체적인 텍스트 표현하기 [일러스트레이터] 블렌더 툴로 입체적인 텍스트 표현하기 안녕하세요. 당근입니다. 오늘도 간단한 타이포그래피 튜토리얼을 가져왔습니다. 아래로 살짝 입체감을 주어 글씨가 타이포가 더 돋보이게 해주고 가시성을 올려주는 디자인입니다. 굵은 폰트를 사용하는 텍스트 위주의 화면을 구성할 때 유용해요. 완성샷을 먼저 볼까요? 먼저 아트보드를 불러온 후 원하는 텍스트를 쓰세요 이 상태에서 같은 텍스트를 복사하여 붙여넣고 뒤로 정렬합니다. 마우스 우클릭 - Arrange - Send to Back 을 누르시거나 단축키 Ctrl + Shift + [ 를 누르세요. 그럼 이렇게 되겠죠? 이처럼 같은 텍스트를 이용해 앞에 있는 텍스트에 좀 더 어둡게 명암을 주고싶다고 생각해보세요. 이렇게 모서리 부분이 이어져있지 않아서 글씨.. 2020. 3. 2.
UI/UX 협업에 필요한 프토토타이핑 툴 정리 : 다운로드 및 학습 사이트 UI/UX 협업에 필요한 프토토타이핑 툴 정리 스케치 Sketch https://www.sketch.com/ The digital design toolkit Save, share and organize your designs, in one place Seamless integration to the Mac app makes saving to Cloud as easy as hitting ⌘S. From there, you can organize designs into Projects, share them with collaborators (or a whole team) and keep track of chang www.sketch.com 맥 OS용 프로그램. 유료. 1년 99달러 (체험사용 가능, 1년 후.. 2020. 2. 26.
UI 프로토타이핑 툴 피그마(Figma) - 2. 프로토타이핑 및 개발 도구 UI 프로토타이핑 툴 피그마(Figma) - 2. 프로토타이핑 및 개발 도구 안녕하세요. 당근입니다. 오늘은 지난 포스팅에 이어서 UI 디자인 프로토타이핑 툴 피그마(Figma)에 관한 포스팅을 계속해보겠습니다. 지난번에 아래처럼 간단한 오브제들을 만들고 배치해봤는데요. 오늘은 프로토타이핑까지 연결해서 동작시켜보겠습니다. 지난 포스팅 설치 및 간단한 화면구성에 대한 포스팅은 아래 링크를 클릭해주세요. https://nicecarrot2.tistory.com/24 UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 및 버튼 만들기 UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 안녕하세요. 당근입니다. 오늘은 UI 프로토타이핑 툴 피그마(Figma)를 설치하고 사용해보려고해요. UI 프로토타이핑.. 2020. 2. 26.