본문 바로가기

기록

랜딩 페이지 디자인
랜딩 페이지 디자인 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- 기존의..
Path(네온사인 효과)
Path(네온사인 효과) 2024. 5. 7. - 레이어 기능ctrl - 레이어 섬네일 (레이어 영역 선택)ctrl + shift (네모 표시에 플러스 표시) -  다중선택ctrl + alt - 선택 해제ctlr + E - 레이어 병합 (Marg)_되도록 사용하지 않기shift + ctrl + alt +E - 병합해서 새로운 레이어 생성 (원하지 않는 레이어는 하이드)Lock 기능 - 1. 투명창 채색 금지 2. 브러쉬 금지 3. 이동 금지 4.  5. 전체 잠금  레이어 스타일 다양한 스타일들이 있음 자주 쓰이는 '그림자', '라인 채우기' 등 다양하게 있음 'color overlaiy' 는 색을 채워주는 레이어 스타일 stroke 는 라인의 색을 넣고 두께 효과 등을 설정 할 수 있다. 설정 이후에 이 레이어에 설정이 저장되기 때문에 더블클릭하면..
블렌드 모드, 이중 노출 (Double Exposure), blend if
블렌드 모드, 이중 노출 (Double Exposure), blend if 2024. 5. 3. -블렌드 모드 레이어에 여러가지 효과를 줄 수 있다. 이를 블렌드 모드라고 하며 여러 종류가 있다. 첫번째 박스 - 기본과 디졸브 (픽셀이 흩뿌려진듯한 효과를 준다.)두번째 박스 - 어두운 픽셀을 표현하는 레이어들 흰색을 투명하게 만든다. (이미지에서 구성되는 어두운 값을 합성)세번째 박스 - 밝은 픽셀을 표현하는 레이어들 검은색을 투명하게 만든다. (이미지에서 구성되는 밝은 값을 형성)네번째 박스 - 중간의 회색을 투명하게 만들어 주는 레이어 그래서 밝은 부분은 더 밝게 어두운 부분은 더 어둡게 만들어준다. (Overlay, Soft Light 를 많이 쓴다.)다섯번째 박스 - 특수한 효과를 넣는데 주로 보색같은 느낌을 표현할 때 쓴다.마지막 박스 - 색감에 관한 레이어 위처럼 적용하는 이미지에 따라 ..

티스토리툴바