반응형

개발 같이해요/DESIGN 4

[피그마] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)

[ 피그마 ] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)  피그마 작업중 이미지를 도형모양으로 넣는 프로필 UI 가 필요하게 되었습니다.  빠르고 쉽게 작업하는 방법을 같이 알아보도록 하겠습니다.  해당내용은 포토샵의 클리핑 마스크, 피그마에서는 마스킹 을 응용한 방법입니다. # 1.클리핑 마스크 란? ( Clipping Mask )  클리핑 마스크(Clipping Mask) 는 특정 도형(Shape)을 기준으로 이미지 또는 오브젝트의 특정 부분만 보이도록 잘라내는 기능입니다. 예를 들어, 이미지를 원형으로 자르거나, 텍스트 안에 이미지를 넣을 때 활용할 수 있습니다.    # 2.피그마에서 적용하기 - 이미지 가져오기  1) 하단에서 Image/video ... ..

[ 피그마 ] 초간단! 표 (테이블 table) 만들기

[ 피그마 ] 초간단! 표 (테이블 table) 만들기 피그마 작업중 테이블 UI 가 필요하게 되었습니다.  빠르고 쉽게 작업하는 방법을 같이 알아보도록 하겠습니다.  해당내용은 오토레이아웃을 응용한 방법입니다. # 1.네모박스 및 표 셀 만들기 이번 작업을 위해 네모 박스를 하나 그려줍니다.  1) 하단에서 네모 박스 선택  2) 원하는 크기의 박스 만들기    전 220 X 60 사이즈로 만들었습니다.  3) 박스 아웃라인 설정하기 박스를 만들었으니, 박스 테두리를 만들어줍니다. 박스 색상 변경은 Fill 에서 하시면되고, 테두리는 Stroke 에서 하시면 됩니다.Center 옵션으로 만드시면 됩니다.  4) 텍스트 박스 만들기  텍스트를 클릭후 아까 만든 박스안에 위치를 지정하고, 원하는 텍스트를 ..

[ 피그마 ] 초간단! 피그마 이미지 블러 처리 하기 ( Image blur )

피그마 작업중 이미지위에 이미지를 입히는 블러 효과가 필요하게 되었습니다.  빠르고 쉽게 작업하는 방법을 같이 알아보도록 하겠습니다. # 1. 예시 이미지 구하기 이번 작업을 위해 pixabay 에서 이미지를 하나 가져와보도록 하겠습니다.저는 무료 이미지 구하는 사이트 (unsplash , freepik , pixabay ..) 중 pixabay 를 즐겨 사용합니다.      # 2. 피그마에서 이미지 불러오기  이미지는 place image/video 에서 불러오실수 있습니다.단축키는 ctrl + shift + K 입니다.  이미지를 불러온 모습입니다. 이제 여기서 블러 효과를 넣어서 텍스트를 입력해보도록 하겠습니다. # 3. 피그마 블러 효과  예시로 사각형을 그릴뿐, 다른 도형으로 해도 괜찮습니다~..

[ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기

필자는 피그마 무료버전을 사용중입니다. 팀원이 피그마 에서 작업 하는데, 동시작업은 유료버전이 필요합니다.내 로컬 Drafts 로 옮겨도 request access 가 뜨는데, 로컬로 옮긴 후 작업 할 수 있는 방법을 공유 하도록 하겠습니다. # 1. 피그마 현재 상태 현재 피그마 상태입니다. 복사를 했음에도 Ask to edit 이 뜨고 , 수정은 불가능합니다. # 2. 해결방법 해결방법은 매우 간단합니다. 복제를 할 때, duplicate to yout drafts 버튼을 클릭하면 끝!!이제 편집이 가능하게 내 Drafts 에 복제 됩니다. 🚩 참고 사항 로컬로 복제 하는 것 이기 때문에, 원본파일에 영향을 미치지 않습니다!   ✅ 같이보면 좋은 글 [정보공유 같이해요/SHORTCUT] - [ 피그..

반응형