반응형 분류 전체보기 반응형 247 [피그마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. UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 및 버튼 만들기 UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 및 버튼 만들기안녕하세요. 당근입니다. 오늘은 UI 프로토타이핑 툴 피그마(Figma)를 설치하고 사용해보려고해요. UI 프로토타이핑 툴은 Adobe XD와 스케치(+제플린)이 또 유명한데.저는 스케치는 써본적이 없고 XD만 한 프로젝트 하는 김에 끄적끄적 사용해 본 경험이 있습니다.스케치는 맥용 툴이라 윈도우 사용자분들은 포토샵+제플린 플러그인 설치해서 사용하시더라고요. 조만간 스케치도 맥북에 깔아서 이것 저것 테스트 해보려고합니다.일단 오늘은 브라우저 기반으로 어떤 운영체제에서도 사용이 가능한 피그마(Figma)를 테스트해볼겁니다.설치 이외에 어느 정도까지 해보고 테스트를 할 지도 잘 모르겠어요. 일단 써봅니다. https://www.figma... 2020. 2. 25. 맥북에 아이패드로 듀얼 모니터 사용하기(feat. 카탈리나) 맥북에 아이패드로 듀얼 모니터 사용하기(feat. 카탈리나) 안녕하세요? 당근입니다. 저는 지난해 말 ~ 올해 초에 맥북 16인치를 질렀죠. 그래서 OS로 카탈리나를 쓰고 있는데요. 카탈리나 때문에 여러가지 우여곡절이 있었지만 그 와중에 카탈리나만이 가진 꿀팁이 있어 가지고 왔습니다. 바로 아이패드를 맥북에 연결해서 보조 디스플레이로 사용하는 것입니다. 어떤 맥북을 쓰느냐와 관계없이 카탈리나 업데이트를 하시면 사용가능합니다. 이전에도 저는 아이패드를 이용해서 듀얼모니터로 사용하곤 했는데요. 그때는 듀엣 디스플레이라는 유료 아이패드 앱이 필요했어요. 이렇게 생긴 앱입니다. 하지만 패드 화면에서 마우스같은 걸 보면 동작도 좀 느리고 해상도도 맞지않아서 되는게 어디냐! 하고 썼었죠. 게다가 이렇게 유선으로 반.. 2020. 2. 24. 맥북 프로 USB C타입 허브(사테치 OEM) 안녕하세요. 당근입니다. 최근에 맥북 프로 16인치를 구입했는데요. USB가 전부 C타입이라서 기존에 쓰던 USB 저장장치들과 무선 마우스 등을 사용할 수 없어서 곤란했는데요. 그래서 허브를 구입했습니다. 네이버에서 USB허브를 치면 나오는 제품중에 하나 구입했어요. 맥북 프로 타입C 알루미늄 USB C타입 HDMI 1080P 60Hz/4K USB-C 허브 이렇게 되어있네요. 맥북을 샀던 시기와 비슷하게 1월 경에 주문을 했지만 중국에서 오는 해외배송 제품이라 한달하고도 5일이 지나서야 받았습니다. 하필 중국 춘절 기간이랑 겹쳐서 배송이 늦어진 데가 요사이 코로나 바이러스가 기승을 부리잖아요. 언제 도착할 지 모르는 상태에서 거의 잊어버리다시피 하고 있었더니 드디어 도착했습니다. 제 맥북은 스페이스 그레.. 2020. 2. 22. 티스토리에 파비콘(favicon) 적용하기 안녕하세요. 당근입니다. 오늘은 파비콘을 만들고 자신의 웹사이트에 적용해볼건데요. 먼저 파비콘이란 무엇이냐하면 인터넷 웹브라우저에 탭에 표시되는 아이콘을 말합니다. 'favorites + icon'이라서 favicon이라고 하네요. 여러가지 브라우저에 호환되는 파비콘을 만드려면 좀 더 복잡하지만 전 간단하게 방법을 알아보고 직접 해보는 것을 목표로 하고 있기 때문에 다양한 사이즈로 하지 않고 한 사이즈로 만들겠습니다. 기본적으로 통용되는 파비콘의 사이즈는 16px * 16px 입니다. 확장자는 ICO나 PNG를 쓰면 돼요. 저는 32px로 만들겠습니다. 간단히 블로그에 적용할 거니까요. 먼저 파비콘을 디자인해줍니다. 그리고 PNG로 저장해주세요. 배경이 없어야하기 때문입니다. 당근블로그니까 주황색으로 깔.. 2020. 2. 21. 중국어 무료 인강 사이트 추천 (경기도 온라인 평생학습관 GSEEK) 안녕하세요? 당근입니다. 오늘은 제가 HSK 시험을 준비하면서 도움받았던 무료 인강 사이트 하나를 소개하려고 해요. 포털 사이트에서 중국어 무료 인강을 검색하면 온갖 인강 사이트나 학원 광고만 쏟아지잖아요. 제가 소개하고자 하는 사이트는 경기도에서 운영하는 경기도 온라인 평생학습관, GSEEK(지식) 이라는 사이트입니다. https://www.gseek.kr/main/intro GSEEK - 경기도 온라인 평생학습 서비스 지식 배움기부제 (2020.01.01 ~ 2020.02.20) , 원 www.gseek.kr 경기도민 뿐 아니라 전 국민 누구나 가입만 하면 무료 인강을 들을 수 있는 사이트입니다. 사이트 소개에서 나온 글을 한번 볼까요? 중국어 뿐만이 아니라 취업에 관한 소프트웨어를 다룰 수 있는 프.. 2020. 2. 20. 이전 1 ··· 23 24 25 26 27 28 다음
