디자인/좋은 디자인24 7-1. 이미지 오버레이 정말 멋진 배경의 사진과 타이포그라피 구도입니다. 하지만 이 구성에는 문제가 너무 명백합니다. 배경이 너무 밝아서 또는 배경과 그 위의 객체간 대비가 충분하지 않아서 텍스트를 알아보기가 매우 어렵습니다. 이런 문제가 있는 디자인에 오버레이를 적용해봅시다. 오버레이란 이미지 위에 색을 채우는 것을 말합니다. 가장 일반적인 방법으로는 어두운 배경을 채워서 사진과 사진 위의 텍스트의 대비를 명확하게 만드는 것입니다. 이로써 이전보다 텍스트를 알아보기 쉬워졌습니다. 검은 배경을 더하는 것이 일반적이라고 말했는데 착색(Tinting)이라는 기법도 있습니다. 사진에 (검은색이 아닌) 다른 색상을 착색하는 것입니다. 일단 먼저 사진의 채도를 낮춰서 흑백사진으로 만들어야합니다. 그리고 다시 색을 채워주면 되는데 이번에.. 2023. 11. 20. 7. 사진(Photography)을 활용하는 방법. 웹 디자이너로서 사진을 다룰 일이 아주 많습니다. 사진은 아름다운 디자인의 주요 재료로써 매력적인 웹 사이트를 찾아보면 잘 선정된 사진으로부터 매력이 느껴집니다. 올바른 사진과 잘 배치된 타이포그라피만 가지고도 충분히 매력적인 사이트를 만들 수 있습니다. 이번에는 사진의 활용 방법에 대해서 알아보도록 하겠습니다. 7-1. 7-2. 7-3. 2023. 11. 20. 6-3. 색상 찾기 색상을 추출할 때 우리 주변의 사람 또는 자연이나 동물에서 찾는 방법에 대해서 앞전에 설명했었습니다. 한 가지 방법이 더 있습니다. 바로 차용입니다. 색은 혼자만 소유할 수 없습니다. 디자이너들은 항상 서로의 색을 차용합니다. 사진에서 색을 추출하는 것도 좋은 방법이지만 색을 차용하면 바로 작업에 적용할 수 있어 훨씬 더 쉬운 방법입니다. 제가 자주 참고하고 영감을 받는 몇몇 사이트를 소개하고자 합니다. 첫번째는 핀터레스트입니다. 꼭 디자인이 아니더라도 한 번쯤은 들어봤을 페이지입니다. 핀터레스트에는 디자인과 관련한 수많은 작업물이 올라와서 참고하기 좋은 사이트 중 하나입니다. Pinterest 요리법, 집 꾸미기 아이디어, 영감을 주는 스타일 등 시도해 볼 만한 아이디어를 찾아서 저장하세요. www.p.. 2023. 11. 20. 6-2. 색상 미세조정 이전 시간에 색상을 추출하는 방법에 대해서 알아봤는데, 추출한 색상을 디자인에 적용해봤습니다. 하지만! 아직 부족합니다. 추출한 색상을 조금 더 다듬어서 더 세련되고 디자인에 맞는 방향으로 적용하는 법에 대해서 알아보도록 하겠습니다. 위 사진에서 두 가지 색상을 추출했습니다. 그런데 갈색이 딱 들어맞아 보이지 않네요. 깃털의 색깔이 밝은 부분도 있고 어두운 부분도 있어서 색이 균일하지 않다는 문제가 있습니다. 따라서 한 곳에서 색을 추출한다면 이미지에서 느껴지는 것과는 다른 인상의 색이 추출됩니다. 추출한 색보다 더 가볍고 활기찬 색이었으면 좋겠습니다. 이럴 때 색상의 미세조정이 필요합니다. 색상의 밝기와 채도(Saturation & Brightness)를 조절하면 됩니다. 밝기는 색상표의 수직축에 해당.. 2023. 11. 20. 6-1. 색상 추출 좋은 디자인에 있어서 색상 선택을 매우 중요합니다. 하지만 좋은 색은 어떤 것인지? 혹은 나쁜 색은 어떤 것인지? 우리는 그 기준에 대해서 명확하게 배운적이 없습니다. 색을 선택할 때 요령이 있는데 이 요령에 대해서 알아보도록 합니다. 일단 기본적으로 자신이 직접 생각하거나 혹은 피그마에서 제공하는 색을 직접 선택하지 않고 다른 작업물에서 색을 차용하는 것입니다. 여기서 말하는 다른 작업 물이란 웹사이트, 삽화, 포스터와 같은 모든 디자인을 말합니다. 이런 인위적인 작업물 말고 우리 주변에서도 좋은 색을 쉽게 찾아 볼 수 있습니다. 사람, 자연, 동물 등 실물의 색을 표본으로 삼는다면 꽤 좋은 색을 찾아낼 수 있습니다. 왜냐하면 자연계는 대부분 훌륭한 색조합을 갖추고 있기 때문입니다. 오른편의 사자 사진.. 2023. 11. 20. 6. 색상(Color)을 활용하는 방법. 6-1. 6-2. 6-3. 2023. 11. 20. 5-3. 서체 설정 자간 간격 설정 위의 사진들은 모두 공통적인 특징이 있습니다. 글자간 간격이 매우 넓습니다. 문자 간격을 글꼴을 변경하며 필요에 따라 글꼴을 맞춤 설정할 수 있는 속성 중 하나입니다. 아주 빽빽하거나 딱 맞게 할 수도 있고 깔끔하고 여유롭게 설정할 수도 있습니다. 위 영화 오프닝 타이틀처럼 간격을 크게 넓히는 것을 파노라마라고 합니다. 폰트 디자인 기법 중 하나로 매우 세련되며 텍스트에 중요성을 더해 아주 중요한 말을 하는 것 처럼 느껴집니다. 이 기법을 웹디자인에 적용해 보면 어떨까요? 이미 큰 제목이 있는 텍스트에 추가적인 제목을 넣어야하는 경우 파노라마 부제를 적용하는 것이 가능합니다. 전자와 비교했을 때 후자가 조금 더 매력적으로 느껴집니다. 이런 파노라마 스타일은 다른 곳에서도 반복적으로 적용이.. 2023. 11. 17. 5-2. 서체의 범주 서체의 범주 서체의 범주를 이해한다면 프로젝트에 적합한 서체와 글꼴을 더 쉽게 선택할 수 있습니다. Serif(꼬리)의 여부에 따라 나뉘는 Serif와 Sans Serif, Display와 Script라는 서체 종류가 있는데 모두 4가지 입니다. 일단 서체 대부분은 Serif나 Sans Serif 이 두가지의 범주의 속합니다. 먼저 사진에서 보라색 원으로 표시한 저 꼬리를 Serif(세리프) 라고합니다. 프랑스어로 "sans"는 "없음"을 뜻하는 말로 Sans Serif(산스 세리프)는 "Serif 없음!" 라는 뜻입니다. 위 사진에서 보는 것 처럼 산스 세리프는 꼬리가 보이지 않네요. 먼저 Serif 서체에는 세 가지의 고유한 스타일이 있습니다. Oldstyle 서체는 이름 그대로 매우 고전적인 성격을.. 2023. 11. 17. 5-1. 글꼴 성격 글꼴 성격 세상에 수 많은 글꼴이 존재하는데 각각의 글꼴에는 개성과 성격이 있습니다. 재미있고 장난스러운 것이 있고, 엄격하고 무뚝뚝한 글꼴도 있으며 학문적이고 복잡한 것도 있습니다. 이런 글꼴의 개성은 상황에 맞는 옷을 고르는 것만큼 매우 중요합니다. 예를 들어, Proxima Soft라는 글꼴은 겨울 휴가 페이지 분위기에 어울리지만 고급 사무실 공간을 판매하는 페이지와는 전혀 어울리지 않습니다. 왜냐하면 Proxima Soft라는 글꼴은 가볍고 친근한 성격이기 때문에 명절이나 아동 또는 가벼운 음식 등 친근하고 접근하기 쉬운 웹사이트에 더 적합합니다. 위 사진 배경을 잘 살펴보면, 건물 외벽 직사각형의 각진 형태는 엄격하고 사뭇 진지한 분위기를 형성합니다. 또한 Proxima Soft 글꼴이 텍스트의.. 2023. 11. 17. 5. 서체(Typography)를 활용하는 방법 모든 웹사이트에는 텍스트가 존재합니다. 많은 웹사이트 디자인이 텍스트 스타일에 따라서 달라집니다. 이것을 타이포그라피라고 합니다. 타이포그라피는 올바른 글꼴 선택만을 의미하지 않습니다. 다시 말해 글꼴의 조합을 선택하는 것을 말합니다. 이 세상에는 수만은 글꼴과 서체가 존재하는데, 이 중에서 상황과 맥락에 적합한 것을 선택하면 됩니다. 타이포그라피에 따라서 웹사이트는 가독성이 좋거나 유치하게 보일 수 있습니다. 혹은 가독성을 떨어트리게 만들 수도 있습니다. 텍스트는 웹사이트에서 빼놓을 수 없는 중요한 요소이며, 선택과 활용 방법에 대해서도 명백한 규칙과 지침이 있습니다. 타이포그라피를 적절하게 잘 활용하는 방법에 대해서 알아보도록 하겠습니다. 2023. 11. 17. 이전 1 2 3 다음
