본문 바로가기

기록/수업정리_웹디자인

와이어 프레임
와이어 프레임 2024. 5. 24. - 피그마를 사용해 와이어 프레임 만들기 임의로 프레임을 생성 후 프레임에서 와이어프레임을 선택해 영역을 넓혀 준다. 그리고 만들고자 하는 용도에 따라 중앙선을 넣어주거나 레이아웃 그리드를 생성해 준다. 픽셀 단위의 그리드나 칼럼 그리드등 다양하게 생성이 가능하다. 중앙선을 넣어줄 거기 때문에 센터로 선을 넣어준다.내용을 입력할 때 여백을 남기기 유용하도록 auto layar 로 만들어 준다.먼저 글을 하나 배치해준 후 오토 레이어로 만들고 주변의 여백을 모두 0으로 만들고 alt를 눌러 원하는 여백만큼 띄워 배치한다. 그리고 Ctrl + D를 눌러 주면 처음 설정했던 여백만큼 띄워지면서 복사가 된다. 그리고 글자를 전체 한번 묶어서 오토 레이어로 만들어 주고 글자를 변경하면 글자에 따라 여백을 자동적으..
피그마를 이용해 아이콘 제작
피그마를 이용해 아이콘 제작 2024. 5. 21. 피그마를 사용해 아이콘을 제작하게 되면 svg 파일로 제작 하게 되는데, svg 아이콘 하나만 제작하면 여러가지 반응형에도 적용할 수 있다. 용량이 작고 크기를 원하는대로 늘려도 이미지가 깨지지 않기 때문에 이미지 관리에 용이하다. (백터 방식이기 때문에 가능함) 피그마는 백터방식 기반이라 가볍고 ui 작업에 유용한 툴포토샵으로 합성이나 이미지 생성을 하고 피그마로 레이아웃을 잡는다. 툴은 포토샵과 유사하며 툴 사용법이 간편한 편이다. 색상 채우기 선 채우기등 다양한 선택지가 있다. (오른쪽에 +,-를 선택해 기능을 넣거나 뺄 수 있다.) 'frame'은 포토샵에서 캔버스와 비슷한 개념을 가지고 있다. 작업한 컨텐츠들은 모두 frame 안에 있어야 외부로 출력할 경우 모두 가져 올 수 있다. 툴을 사용해..
랜딩 페이지 디자인
랜딩 페이지 디자인 2024. 5. 20. 랜딩 페이지 > 반응형이 주된 트렌드모바일 사용자가 늘어나는 추세이기 때문에 반응형이 필요하다. 여기에 코딩이 더해지기 때문에 어려워 진다.반응형 웹 모음 사이트브라우저 크기에 따라 레이아웃이 변경되게 설정하고 디자인 하는게 반응형 디자인 (모바일, 태블릿, pc ...) brack point (중단점)반응형으로 변경할 때 바뀌는 부분을 이야기 한다.  (pc : 1024 + / 태블릿 : 1023 - 768 / 모바일 : 767 - 320 (375))기본적으로 모바일과 태블릿 둘다 세로상태를 기준으로 한다. - 랜딩 페이지 : 1페이지 짜리 홈페이지, 브랜드나 상품의 명함이라고도 할 수 있다. 판매자가 원하는 정보를 사용자에게 좀 더 직접적으로 전할 수 있도록 허고 사용자가 여러번 찾는것이 아닌 한번에..
상세페이지
상세페이지 2024. 5. 17. - 상세페이지디자인은 가로가 기준이 된다. (기본 960 정도)보통 카드 디자인이나 크기가 작은 디자인들은 3등분법을 사용하지만 상세페이지는 세로가 길기 때문에 칼럼 그리드를 (12,16등) 사용한다. 그리드를 만들어 주는 사이트도 있다. 입력값(나누고자 하는 그리드 수, 컨텐츠 크기, 사이 여백)을 넣게 되면 계산을 해주는데 이때 컨텐츠 width와 full width 가 나오는데 여백을 잡지 않는 것과 잡은 값을 알려준다. '이벤트 페이지 제작'에서 나왔던 칼럼 그리드 설정 방법을 사용해 기본적인 베이스 그리드를 만들어 준다.- 화살표 만드는 방법 도형툴로 사각형을 그려준 후 path 수정툴을 눌러 원하는 꼭짓점을 누르고 우클릭 하여 Delect Anchor Point를 누르면 삼각형으로 만들어진다...
카드 디자인
카드 디자인 2024. 5. 16. - 카드 뉴스  : 이미지와 텍스트가 결합되어 배너 형태로 만들어진 '배너형 기사'  - 기본 구성 _ 표지 1장 본문 2-10장  마지막장 1장표지는 메인 타이틀 첫 페이지인 만큼 첫인상을 결정 흥미를 유발하는 타이틀을 작성해야함타이틀이 잘 보이게 끔 복잡하지 않게 배경이미지를 선택해야 하고본문은 제목, 내용, 배경 이미지 등을 구성하여 디자인 관련있는 이미지를 사용하고 본문 페이지인 만큼읽기 편안하고 가독성이 높은 폰트로 작성마지막 장은 생략 되기도 하지만, 기업/브랜드를 알릴수 있는 홍보문구, 전달하고자 하는 메세지 등을 넣어마무리 하면 좋은 인상을 줄 수 있다. - 제작시 주의 사항 - 가독성이 낮은 폰트 금지 - 적당하게 행간 조절 (1.5-1.2배 정도 / 모바일은 1.6-1.7배 까지도 가능..
패턴 활용 & 인물 보정을 활용한 광고 디자인
패턴 활용 & 인물 보정을 활용한 광고 디자인 2024. 5. 14. - 패턴을 활용한 타이포그래피패턴에 들어가서 이전 버전의 패턴들도 확인 할 수 있다.패턴을 넣기 전 빛을 설정하기 위해 그라디언트를 활용한다.Radial를 선택해 중앙에 빛을 쏘는거 처럼 넣어주고 하이라이트 부분을 넓히고 Dither 을 눌러 중간단꼐를 넣어 부드럽게 해준다. 레이어 하단 메뉴에서 패턴을 선택하여 원하는 패턴을 넣어주고 앞서 넣었던 배경과 결합이 되도록 Overlay를 선택해준다. Fortuna Dot 글꼴은 비즈나 다이아몬드를 표현하기 좋은 폰트이다. 글자를 설정할때 자간과 행간이 어떻게 설정되어 있는지 확인하는것이 좋다. 같은 레이어를 하나 더 만들어서 fill를 줄여주는데 fill를 줄여도 레이어 스타일은 올라가기 때문에 (원본 색이 빽으로 들어가게 되는것) 투명하고 입체적인 효과를..
이벤트 페이지 제작
이벤트 페이지 제작 2024. 5. 13. - 이벤트 페이지 이벤트 페이지란 웹 프로모션 플랫폼의 기본적인 페이지 형태로써 특정기간 동안진행되는 고객과의 소통을 위해 제작되는 광고 디자인 페이지 입니다. 현재 진행되는 이벤트를 고격에게 알리고 홍보하기 위해 만드는 디자인 페이지입니다.이벤트 웹 페이지를 구성할 때 고려해야 할 구성요소는 이벤트의 흥미를 끌 디자인 요소, 이벤트 소개, 이벤트의 목적, 날짜 등을 고려하여 구성해야 함기본적으로 배너같은 내용이 짧은 디자인은 3등분 레이아웃을 채택하지만 웹사이트나 이벤트 페이지 상세 페이지 같은 내용이 긴 디자인은 컬럼 그리드를 사용한다.(12등분으로 나눠 놓은 그리드, 15, 16, 20등 다양하게 활용이 가능하지만 주로 12 컬럼 그리드를 쓴다.) view - new guide layout에서 12..
레이아웃 & 그리드 활용하여 배너 제작
레이아웃 & 그리드 활용하여 배너 제작 2024. 5. 10. 작업한 아트보드 옆에 새로운 영역을 만들기 위해선 Move Tool에서 Artboard 툴로 바꾸어 새로 영역을 설정해준 후상단에 크기를 알맞게 조절해 준다. 아트보드에 각각 이름을 지정해 놓으면 저장시 각각 제목이 됨 배운거와 마찬가지로 삼각형 그리드를 선으로 그려 사용해도 되지만 기본적으로 3x3 그리드를 사용하기 때문에 그리드 레이어에서 여백과 함께 설정하여 만들어 준다. 이전에 만들었던 레이어를 누르고 Alt 키를 누른상태로 새로운 아트보드에 끌어당기면 복사가 된다.(상단 레이어 색이 이상한 부분은 마스크가 잘못 되어있어서...) 또 다른 방법은 아트보드 툴로 누른 상태로 새로운 작업영역을 작업할때 그리드를 새로 지정하게 되는데 모든 그리드를 지우지 말고 해당 아트보드의 그리드만 지워 각각 그리드..
디자인 이론
디자인 이론 2024. 5. 9. - 디자인의 기본 이론 (배치, 정렬, 반복, 대비)을 이용한 상세페이지 만들기  주변 여백을 설정하기 위해 가이드라인을 잡는것이 좋다.배치전 와이어 프레임을 설정해 디자인 구성을 미리 잡고하는 것이 좋다웹에서 사용할때는 기본적으로 행간을 1.5배로 설정하고 앱에서는 또 다르게 설정한다또한 point 보단 pxcel 로 글자를 지정하는것이 나중에 웹으로 갔을때 글자 크기를 맞추기에 좋다.배너 작업을 할 경우 짝수로 설정해야 크기 조절을 했을때 해상도가 많이 깨지지 않는다. Auto Leanding - 행간 (150% = 1.5배) 새로운 작업을 할때마다 새롭게 행간을 설정하는 것이 좋다. 웹상에서 깔끔한 서체로 자주 쓰이는 'Noto Sans'체 글자를 배치 할때 일정한 넓이의 간격을 두고 배치하는 것이..
도형 툴 & 글래스모피즘 & 광고 디자인
도형 툴 & 글래스모피즘 & 광고 디자인 2024. 5. 8. - 도형툴 기본적으로 상단의 메뉴를 사용해 색, 선의 굵기 색등 설정이 가능하고 모양툴을 누른 상태로 더블클릭하면 생성창이 뜬다. 도형툴은 다양하게 변형이 가능하며 모서리를 조절하거나 링크를 풀어 일부만 조정 할 수도 있다. Path와 같은 방식이기 때문에 Path 툴에서 사용되는 툴을 사용 할 수 있고 기능도 마찬가지로 자유롭게 사용이 가능하다. 백터 방식이기 때문에 수정해도 크게 깨지거나 하지 않는다.1. New Layer - 새로운 도형을 만들면 신규 레이어가 생성됨2. Combine Shapes - 도형이 합하여짐3. Subtract Front Shapes - 도형을 빼는것4. Intersect Shape Areas - 교집합만 남긴다.5. Exclude Overlapping Shapes- 기존의..

티스토리툴바