✏️ 2024. 11월 16일 / 피그마 기초 1
🌍 Figma, 피그마에 대하여
✖️
일러스트 기초가 마무리 되면서 피그마에 대해 공부를 시작했습니다.
피그마, 들어는 봤지만 생소한 프로그램이라 조금 걱정이 되었는데요.
도구나 눈에 보이는 툴들이 굉장히 직관적으로 되어 있어서 오히려 편리하다는 생각이 들었습니다.
우선 피그마는 [백터]를 기반으로 되어 있어 일러스트 프로그램과 비슷한 느낌이 있어요.
포토샵과 일러스트를 직관적으로 합쳐 놓은 것 같은 느낌이 든답니다.
💡 피그마는 온라인을 기반으로 접속합니다 (웹사이트 접속)
💡 여러명이 하나의 프로젝트에 참여할 수 있어요
💡 프로젝트 안에 코멘트도 작성할 수 있어요
💡 한 프로젝트 안에서 다수의 작업 화면을 생성할 수 있답니다.
📌 추가 단축키 - 환경설정 Ctrl + K
🎬 물리적 해상도와 논리적 해상도
✖️
쉽게 설명드리겠습니다.
평균적인 컴퓨터 모니터의 화면은 1920x1080의 해상도를 사용합니다.
만약 모바일의 화면도 동일한 해상도의 이미지를 보여준다면, 이런 큰 이미지를 작게 축소해버리는 개념이 되기 때문에
이미지를 꾸겨넣은 느낌이 날 것입니다.
이미 작은 이미지를 크게 만들어서 쓰는 것이 훨씬 더 적합하다는 의미의 내용이라고 이해하시면 좋을 것 같습니다.
🖥️ 새롭게 시작해봅시다
✖️
🔎 Recents - 작업중 파일 또는 이전 작업(프로젝트) 확인
🔎 Drafts - 작업파일 / 프로젝트 (포토&일러의 New file과 동일)
🔎 All projects - 모든 프로젝트 파일 보기
🔎 Trash - 휴지통 / 30일 동안 보관 후 삭제
🔎 New design file - 새로운 작업창 생성(프로젝트 생성)
🔎 import - 파일 불러오기 (피그마는 포토샵 및 일러스트 파일 확장자를 가져올 수 없어요!)
📋 새로운 작업창을 열어봅시다
이 창이 이제 새로운 프로젝트의 화면 입니다.
피그마에 있는 제목과 같은 부분은 더블클릭으로 이름을 바꿔줄 수 있습니다.
이 창이 이제 새로운 프로젝트의 화면 입니다.
순서대로 이동툴 / 아트보드 생성 / 도형틀 / 펜,펜슬툴 / 문자툴 / 코멘트 / 플러그인툴 / 코드툴 입니다
오른쪽 상단에 있는 패널의 아이콘은 작업물을 미리보기 처럼 적용하여 보는 옵션과
프로젝트의 링크를 공유하는 아이콘입니다.
피그마는 도구를 사용하면, 오른쪽의 패널이 해당 도구의 패널로 자동 변경됩니다.
보이는 것처럼 도형툴을 사용하여 도형을 그리면 오른쪽의 패널이 관련 패널로 변경됩니다.
프로젝트의 링크를 공유하는 아이콘입니다.
도형의 Fill(색상)에서 색상을 눌러보시면 상단에 다양한 아이콘이 있는데요.
이 도형은 색만 넣는 것이 아닌, 이미지도 다양한 방법으로 채울 수 있어 다양한 범위 내에서 디자인이 가능하답니다.
📂 앗, 이건 꼭 읽어주세요!
웹디자인을 할때 도형툴은 디자인 용도 입니다.
웹을 제작하는 프레임을 만들때에는 꼭 # 모양으로 생긴 프레임을 생성하여 작업해주세요.
프레임은 다양한 디바이스의 규격도 편리하게 지원하고 있기에 용도에 따라 사용해보세요!
🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)
