찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고입니다  오늘은 피그마의 Component와 Variants에 대해서 포스팅 해볼까 해요일단 피그마 이전글들을 참고해주시구요  0. styles등록 (text, color)  피그마 ui-스타일가이드, 스타일 등록하기안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESHuiweb.tistory.com1. Layout grid 피그마 Layout grid안녕하세요 찐망고입니다. 할게 많은 와중에 피그마 포스팅 중이고 피그마는 진짜 딱 몇개의 키워드만 공부하시면 끝나는 그만큼 기능은 적지만 알찬 프로그램이에요. 참고로 너무 많은 기능을uiweb.tisto..

안녕하세요찐망고입니다 오늘은 피그마의 Constraints에 대해서 포스팅 해볼까 해요피그마 이전글들을 참고해주시구요 피그마의 constraints는 디자인 요소의 크기와 위치를 프레임안에서 제어하는 기능인데요. 컨스트레인트를 사용하면 디자인요소(예: 프레임, 그룹, 컴포넌트 등)를다른 요소나 프레임에 상대적으로 맞출 수 있습니다. 이를 통해 디자인 요소의 크기를 유지하거나, 요소 간의 간격을 일정하게 유지하거나, 요소를 중앙에 정렬하는 등의 작업을 수행할 수 있어요. 아래 그림을 볼까요? 모바일 사이트를 디자인 하는 중인데 당연히 모바일 viewport도 하나의 사이즈는 아니잖아요?해당 사이즈에서 각각의 디자인요소들이 viewport의 크기에 따라 어떤식으로 보여줘야 할지컨스트레인트기능을 사용하여 보여..

안녕하세요 찐망고입니다 오늘은 피그마의 Auto Layout에 대해서 포스팅 해볼까 해요 엄청 편리하고 좋은 기능이라 생각합니다요!! 일단 피그마 이전글들을 참고해주시구요 0. styles등록 (text, color) - 이전글 참조 2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기 피그마 ui-스타일가이드, 스타일 등록하기 안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESH uiweb.tistory.com 1. Layout grid 2023.07.05 - [피그마] - 피그마 Layout grid 피그마 Layout grid 안녕하..

안녕하세요 찐망고입니다. 할게 많은 와중에 피그마 포스팅 중이고 피그마는 진짜 딱 몇개의 키워드만 공부하시면 끝나는 그만큼 기능은 적지만 알찬 프로그램이에요. 참고로 너무 많은 기능을 지원하는데 그런건 나중에 따로 썰 풀도록 하고 0. styles등록 (text, color) - 이전글 참조 2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기 피그마 ui-스타일가이드, 스타일 등록하기 안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESH uiweb.tistory.com 1. Layout grid 2023.07.05 - [피그마] - 피그..

안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESHWAY사이트를 작업하면서 기본적인 스타일가이드도 만들어보았습니다. 스타일가이드가 필요한 이유는 앞으로 진행될 디자인과 마크업(퍼블리싱)때문인데요. 특히 퍼블리싱할땐 자주 사용하는 컬러와 폰트, 폰트사이즈를 미리 CSS로 셋팅해놓고 작업을 하면 아주 편리하기 때문에 디자인과 따로 이렇게 가이드를 만들어주면 좋습니다. 포토샵으로 디자인을 하다가 피그마로 디자인을 하면 참 편한게 일단 피그마는 텍스트 선택시 폰트의 정보가 바로 뜨는데요. Headline/30px Title Bold라고 되어있는 부분은 이런식으로 피그마에..

안녕하세요 찐망고입니다. 키치하다 라는 단어 들어보셨나요?그럼 Y2K디자인은요?2023년 올해 웹디자인 트렌드 중 하나가 Y2K디자인이거든요..일단 키치하다라는 단어부터 알아볼까요? "키치하다" 일반적으로 어떤 대상이 과한 화려함이나 유행에 따른 특징을 가지고 있다는 의미를 뜻하는데요"과하네" 이게 펙트인거 같아요과장되고 유행을 따르는 화려함을 강조하며, 밝고 채도 높은 색상을 사용합니다.아무래도 그러다보니 누군가에겐 키치가 화려하고 재밌을 수 있겠지만,또 어떤 사람들에겐 키치가 너무 과장된 느낌이 들 수도 있겠죠? 안읽어도 되는 키치라는 용어의 유래더보기1. 독일어 "kitschen"과의 연결: 19세게 뮌헨에서 키치는 저급한 예술품이나 모조품을 가리키는 용어로 사용되었던..

1) 라임 영역 잡아 얼음레이어 위에 올려 놓기 2) 백그라운드 얼음레이어 Ctrl + J 맨위로 올리기 - Screen Mode 3) 라임에만 적용 될 수 있게 클리핑 마스크 - Alt + Ctrl + G 4) opacity 조절 사진출처 Unsplash의Hao Zhang 사진출처 Unsplash의Andres Hernandez

포토샵 텍스트 합성 1) Quick Selection Tool 이용 Select and Mask...클릭 - Output To New Layer 2) type도구 글씨 쓰고 ctrl + j 3) 레이어 위아래로 글씨 위치 잡고 맨 위 글씨에 fill: 0 4) Layer Style Stroke주기 05) 글씨레이어 동시에 잡고 이동

01) Clone Source 패널 선택 후 Flip Horizontal 클릭 - Window > Clone Source 02) 도장툴 선택 후 alt + 클릭 - 반대쪽에 문질러 주기 03) Quick Selection Tool 이용 영역 잡아서 ctrl + j 04) 백그라운드레이어에서 배경정리하기 사진 출처 Unsplash의Nain Patel

배경에 구름이미지 합성하기 01) 배경이 되는 이미지에 구름이미지를 가져온다. - Ctrl + T 크기조절 02) 조정레이어에서 Black & White - Blue 슬라이드 조절 - 포인트는 배경을 검정색으로 맞추는 것 03) 구름이미지에 클리핑 구름 이미지를 Screen모드 사진출처 Unsplash의C Dustin 사진출처 Unsplash의Sam Balye 사진출처 Unsplash의henrique setim