디자인상 어떻게 색깔을 맞추느냐가 최고다.
문제 설명:
디자인상 어떻게 색깔을 맞추느냐가 최고다.
분석:
웹 배색 기교
홈페이지를 만드는 초보자는 예쁜 사진을 자신의 홈페이지의 배경으로 사용하는 것이 더 익숙할 것이다. 하지만 대형 비즈니스 사이트를 방문하면 더 많은 흰색, 파란색, 노란색을 사용하여 웹 페이지를 우아하고 대범하며 따뜻하게 보이게 하는 것을 발견할 수 있습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) 더 중요한 것은 웹 페이지를 여는 속도를 크게 높일 수 있다는 것이다.
일반적으로 웹페이지의 배경색은 더 부드럽고 담백해야 하며, 어두운 글자로 자연스러워 보일 수 있습니다. 눈에 띄는 시각 효과를 추구하기 위해 제목에 더 어두운 색상을 사용할 수 있습니다. 다음은 내가 홈페이지를 만들고 다른 사람의 홈페이지를 볼 때, 웹페이지의 배경색과 문자색의 조화에 대한 경험이다. 이러한 색상은 텍스트의 배경색이나 제목의 배경색으로 사용할 수 있으며 다른 글꼴과 함께 사용하면 좋은 결과를 얻을 수 있습니다. 홈페이지를 만들 때 모두에게 유용하길 바랍니다.
Bgcolor # f1fafa-텍스트 배경색이 좋고 우아합니다.
BGColor # E8FFE8-제목의 배경색이 더 좋습니다.
Bgcolor e8e8ff-텍스트 배경색이 더 좋고 텍스트 색상에 검정색을 매치합니다.
BGColor # 8080c0-위에 노란색과 흰색 글자가 있는 게 좋을 것 같아요.
BGCOLORκ÷e8d 098÷- 위에는 연한 파란색이나 파란색 문자가 가장 좋습니다.
Bgcolorκ〃# EFE FDA〃- 위에는 연한 파란색이나 빨간색 문자가 있는 것이 좋습니다.
BGCOLOR # F2F1D7'-블랙 글자로 우아하며 레드 컬러는 눈에 띈다.
BGColor-흰색 문자와 함께 더 잘 보입니다.
BGColor # 6699CC'-흰색 문자와 함께 더 보기 좋고 제목으로 쓸 수 있습니다.
BGColor # 66 CCCC'-흰색 텍스트와 함께 더 보기 좋고 제목으로 쓸 수 있습니다.
BGCOLORκ〃# B45B 3E〃- 흰색 텍스트와 함께 더 보기 좋고 제목으로 쓸 수 있습니다.
BGColor # 479AC7-흰색 문자와 함께 더 보기 좋고 제목을 만들 수 있습니다.
Bgcolor÷ # 00b271÷-흰색 문자와 함께 더 잘 보이고 제목을 만들 수 있습니다.
Bgcolor # fbbea 원-블랙 텍스트와 잘 어울리며 일반적으로 텍스트로 사용됩니다.
BGColor # D5F3F4'-블랙 텍스트와 매치하는 게 더 예뻐요. 보통 블랙을 텍스트로 사용합니다.
BGCOLORκ〃# d7fff 0〃- 블랙 텍스트와 잘 어울리며 일반적으로 텍스트로 사용됩니다.
BGCOLOR # F0DAD2 원-블랙 텍스트와 함께 더 보기 좋고, 보통 문자로 쓰인다.
BGCOLOR # DDF3FF 원-블랙 텍스트와 잘 어울리며 일반적으로 텍스트로 사용됩니다.
연한 녹색 배경에 검은색 문자를 붙이거나 흰색 배경에 파란색 문자를 붙이면 눈에 띈다. 그러나 전자는 배경을 강조하고 후자는 문자를 강조한다. 빨간색 배경에는 흰색 문자가 있고, 어두운 배경에는 노란색 문자가 있습니다.
이 문장 은 단지' 벽돌을 던져 옥을 유인하는' 역할을 했을 뿐이다. 누구나 자신의 상상력을 발휘할 수 있고, 더 신선하고 눈길을 끄는 색깔과 함께 웹페이지를 더욱 매력적으로 만들 수 있다.
= = = = = = = = = = = = = = = = = = = = = =
오늘날 인터넷은 우리 생활에 점점 가까워지고 있으며, 인터넷은 이미 우리 생활에서 없어서는 안 될 부분이 되고 있다. 인터넷 세계는 다채롭고, 대량의 우수한 아름다운 홈페이지가 쏟아져 나왔다. 대량의 인터넷 정보는 텍스트, 이미지, 그림 등을 통해 표현된다. 여기서 텍스트는 웹 페이지에서 가장 중요한 디자인 요소입니다. 웹 디자인 초보자에게는 웹 디자인의 텍스트 조판 디자인을 이해하고 익히는 것이 특히 중요하다. 다음 필자는 자신의 견해를 이야기하고 싶다.
텍스트의 형식입니다
글꼴 크기, 글꼴, 행간
글꼴 크기는 points #quotel.quoter# 또는 Pixel 과 같은 여러 가지 방법으로 계산할 수 있습니다. 픽셀 기술에 기반한 단위는 인쇄할 때 점으로 변환되어야 하므로 포인트 단위로 하는 것이 좋습니다.
웹 페이지 텍스트를 표시하는 데 가장 적합한 글꼴 크기는 약 12 포인트입니다. 현재 많은 종합 사이트가 있는데, 한 페이지에 배치해야 할 내용이 비교적 많기 때문에, 보통 9 시 사이즈를 사용한다. 제목이나 기타 강조해야 할 곳은 큰 글꼴을 사용할 수 있고, 바닥글과 보조 정보는 작은 글꼴을 사용할 수 있다. 작은 글씨체는 전체적인 감각과 정교함을 일으키기 쉽지만 가독성은 떨어진다는 점에 유의해야 한다.
웹 디자이너는 서체를 이용하여 디자인에서 표현해야 할 감정을 충분히 표현할 수 있다. 서체 선택은 감성적이고 직관적인 행동이다. 하지만 어떤 서체를 선택하든 웹 페이지의 전반적인 구상과 방문자의 요구를 기반으로 해야 한다. 예를 들어, 굵은 글자는 강건하고 강건하여 기계, 건축 등에 적합하다. 섬세한 글씨는 우아하고 여성스러우며 의류 화장품 식품 등에 적합하다. 같은 페이지에서 글꼴 종류가 적고 레이아웃이 우아하며 안정감이 있다. 서체의 종류가 다양해서 지면이 활발하고 색채가 풍부하다. 핵심은 페이지 내용에 따라 이러한 비례 관계를 파악하는 방법입니다.
플랫폼 독립성을 강화하는 관점에서 텍스트 내용은 기본 글꼴을 사용하는 것이 가장 좋습니다. 브라우저가 로컬 컴퓨터의 글꼴을 사용하여 페이지 내용을 표시하기 때문입니다. 웹 디자이너로서 대부분의 브라우저는 세 가지 글꼴 유형과 그에 상응하는 특정 글꼴만 컴퓨터에 설치되어 있다는 점을 고려해야 합니다. 지정한 서체는 브라우저의 기계에서 찾을 수 없을 수도 있어 웹 디자인에 큰 제한을 줄 수 있다. 해결 방법은 실제로 특수 글꼴을 사용해야 하는 곳에 문자를 이미지로 만든 다음 페이지를 삽입하는 것입니다.
행간의 변화도 문자의 가독성에 큰 영향을 미친다. 일반적으로 글꼴 크기에 가까운 행간 설정은 텍스트에 더 적합합니다. 일반적인 행간 비율은 10: 12 입니다. 즉 10 포인트를 사용하는 단어이고 행간은 12 포인트입니다. 이는 주로 적절한 행간으로 인해 눈에 띄는 가로 공백이 형성되어 보는 사람의 시선을 유도하고, 너무 넓은 행간으로 인해 문자 행이 양호한 연속성을 잃게 된다는 점을 고려한 것입니다.
가독성에 미치는 영향 외에도 행간 자체도 표현력이 뛰어난 디자인 언어다. 레이아웃의 장식 효과를 높이기 위해 행간은 의식적으로 넓히거나 축소하여 독특한 심미적 재미를 나타낼 수 있다. 예를 들어 행간을 넓히면 쉽게 펴지는 감정을 표현할 수 있어 오락성과 서정적인 내용에 적용하는 것이 적당하다. 또한 세심한 안배와 좁은 행간이 병존함으로써 레이아웃의 공간 수준과 유연성을 높이고 독창적인 마음을 가질 수 있다.
행간은 행 높이 속성을 사용하여 설정할 수 있으며 포인트 또는 기본 행 높이의 백분율을 사용하는 것이 좋습니다. 예: {line-height: 20pt}, {line-height: 150%}.
단어의 전체 배열
페이지의 본문 부분은 여러 개의 단일 단어로 구성된 그룹으로, 페이지의 전체 레이아웃에서 이 그룹의 역할을 충분히 발휘해야 한다. 예술적 관점에서 볼 때, 서체 자체는 일종의 예술 형식으로 볼 수 있으며, 사람의 성격과 감정에 큰 영향을 미친다. 웹 디자인에서 글꼴 처리는 색상, 레이아웃 및 그래픽 처리와 같은 다른 디자인 요소만큼 중요합니다. 어떤 의미에서 모든 디자인 요소는 그래픽으로 해석될 수 있다.
1. 그래픽 텍스트
서체는 두 가지 작용을 한다. 하나는 어의와 의미의 작용을 실현하는 것이고, 다른 하나는 심미 효과이다. 문자라는 그래픽은 심미적 효과를 강조하고 상징적인 문자를 그래픽 요소로 표현하면서 기존 기능을 강화하는 것이다. 웹 디자이너로서, 너는 일반적인 방식으로 서체를 설정하거나, 예술적으로 서체를 디자인할 수 있다. 어쨌든, 모든 것은 어떻게 하면 당신의 설계 목표를 더 잘 달성할 수 있는지를 중심으로 해야 한다.
좀 더 창의적인 방식으로 깊은 디자인 사상을 그래픽적으로 표현하면 웹페이지의 단조롭고 답답함을 극복하고 마음을 감동시킬 수 있다.
2. 단어의 겹침
문자와 이미지 사이 또는 문자와 문자 사이에 겹치면 공간감, 점프감, 투명감, 소음감, 서사감이 생겨 페이지에서 활발하고 눈에 띄는 요소가 될 수 있다. 오버랩 기술은 텍스트의 가독성에 영향을 줄 수 있지만 페이지의 고유한 시각 효과를 만들 수 있습니다. 가독성을 추구하지 않고 일부러' 소음' 을 추구하는 이런 표현 수법은 일종의 예술사조를 구현한다. 따라서 기존 레이아웃 디자인뿐만 아니라 웹 디자인에도 광범위하게 적용됩니다.
3. 제목과 본문
제목과 본문을 정렬할 때 먼저 본문을 2 열, 3 열 또는 4 열로 배열한 다음 제목을 놓을 수 있습니다. 텍스트 단을 만드는 목적은 페이지의 공간과 유연성을 찾아 열의 경직성과 제목 삽입 방식을 단일화하는 것을 방지하기 위함이다. 제목은 전체 단락이나 문장 전체의 제목이지만 항상 단락의 시작 부분에 있는 것은 아니다. 가운데 정렬, 가로, 세로 또는 가로 정렬, 단어 그룹을 직접 삽입하여 새로운 레이아웃으로 낡은 규칙을 깨뜨릴 수도 있습니다.
4. 텍스트 배열의 네 가지 기본 형식
페이지의 본문 부분은 여러 개의 단일 단어로 구성된 그룹으로, 페이지의 전체 레이아웃에서 이 그룹의 역할을 충분히 발휘해야 한다.
양쪽 끝이 균일하다: 문자 길이는 왼쪽 끝에서 오른쪽 끝까지 균일하고, 글자는 네모난 얼굴을 형성하고, 정확하고, 엄밀하며, 아름답다.
가운데 정렬: 단어 간격이 같은 경우 페이지 중심을 기준으로 정렬됩니다. 이 정렬은 단어를 더욱 두드러지게 하여 대칭적인 형식미를 만듭니다.
왼쪽 또는 오른쪽 정렬: 왼쪽 또는 오른쪽 정렬은 한 행의 시작 또는 끝에 자연스럽게 명확한 수직선을 형성하여 도면에 잘 맞도록 합니다. 이런 배열은 느슨하고 단단하며, 허실하고, 춤을 추고 우아하며, 리듬과 운율의 형식미를 만들어 낸다. 왼쪽 정렬은 사람의 독서 습관에 맞춰 자연스러워 보인다. 오른쪽 정렬은 읽기 습관에 맞지 않지만 참신하기 때문에 거의 사용되지 않습니다.
그래픽 주위로 정렬: 그래픽 가장자리 주위로 텍스트를 정렬합니다. 언더레이를 문자에 삽입하면 조화와 자연을 느낄 수 있다.
단어의 강조
1. 줄 맨 앞에서 강조하다
본문의 첫 글자나 글자를 확대하여 단락의 시작 부분에 포함시키면 전통적인 미디어 레이아웃 디자인에서는 "드롭" 이라고 합니다. 이 기술의 발명은 중세 유럽의 원고 필사자로 거슬러 올라갈 수 있다. 눈길을 끌고, 꾸미고, 능동적인 레이아웃을 할 수 있는 기능을 갖추고 있어 웹 페이지의 문자 배열에 적용된다. 그것의 하강 폭은 전체 글자선의 상하 폭을 넘어야 한다. 얼마나 확대할 것인지는 웹 환경에 따라 달라진다.
2. 인용의 초점
홈페이지의 편성에서 우리는 종종 추상적인 단어, 즉 어록을 만난다. 인용문은 한 단락, 장 또는 문장 전체의 대의를 요약하므로 편성할 때 특별한 레이아웃 위치와 공간을 주어 강조해야 한다. 인용문은 문자의 왼쪽, 오른쪽, 위, 아래, 가운데 등 여러 가지 방법으로 정렬할 수 있으며, 글꼴이나 크기에서 문자와 다를 수 있습니다.
3. 한 단어 강조
개별 문자가 페이지의 초점인 경우 굵게, 테두리 추가, 밑줄 긋기, 표시기 추가, 글꼴 기울이기 등을 통해 문자 시각 효과를 향상시켜 페이지 전체에서 두드러지고 눈에 띄게 만들 수 있습니다. 또한 일부 단어의 색상을 변경하면 이 단어들을 강조할 수 있다. 이 방법들은 실제로 대비 법칙을 사용한다.
텍스트 색
웹 디자인에서 디자이너는 텍스트, 텍스트 링크, 방문한 링크 및 현재 활성 링크에 대해 다양한 색상을 선택할 수 있습니다. 예를 들어 FrontPage 편집기를 사용하는 경우 기본 설정은 보통 글꼴 색상은 검은색, 기본 링크 색상은 파란색, 마우스 클릭 시 자주색으로 변경됩니다. 다른 색깔의 문자를 사용하면 강조하고 싶은 부분을 더욱 눈에 띄게 할 수 있지만, 소량의 문자 색상만 사용할 수 있다는 점에 유의해야 한다. 만약 네가 모든 것을 강조하고 싶다면, 사실 너는 아무것도 강조하지 않는다. 또한 한 페이지에 너무 많은 색상을 사용하면 특별한 디자인 목적이 없는 한 페이지 내용에 영향을 줄 수 있습니다.
색채의 사용은 전체 문안의 특수한 부분뿐만 아니라 전체 문안의 감정 표현에도 영향을 줄 수 있다. 이것은 색채의 감정적 상징적 의미를 포함하며, 편폭으로만 제한되며, 여기서는 심도 있게 논의하지 않을 것이다.
또한 광도 대비, 순도 대비, 냉난방 대비 등 문자 색상의 대비에도 주의해야 한다. 이것들은 글자의 가독성에 영향을 줄 뿐만 아니라, 더욱 중요한 것은 색채 운용을 통해 원하는 디자인 효과, 디자인 감정, 디자인 사상을 실현할 수 있다는 것이다. (출처: 네트워크 편집자: 이웃)