Beginning Graphic Design: Images

'이미지' 주제가 무엇이든 간에, 우리는 자연스럽게 이미지에 이끌립니다

고화질의 아름다운 사진부터 꼼꼼하게 제작된 일러스트레이션까지요 – 로고나 아이콘과 같은 심플한 이미지에도 마찬가지죠

이미지는 단순한 장식이 아닙니다 디자인에 있어서, 이미지는 사용자를 끌어들이는 미끼입니다 눈에 띄는 시각 자료는 당신이 고객과 연결되고, 고객에게 강력한 인상을 주는데 도움이 됩니다 그들이 단 한 마디도 읽지 않았다고 해도요 당신의 작업물에 이미지를 쓰고 싶다고 해서 예술가가 될 필요는 없습니다

약간의 창의성과 틀을 깨보려는 의지면 충분합니다 적절한 자원만 있다면, 당신의 디자인을 돋보이게 만들 수 있습니다 첫째: 어떤 프로젝트를 하든 고화질의 이미지를 찾으세요 어쩌면 당신이 카메라를 잘 다루거나 그래픽 디자인을 해본 경험이 있을지도 모르겠네요 아주 좋아요! 그렇지 않으면

좌절하지 마세요 인터넷에는 디자인 목적으로 쓰이는 이미지를 제공하는 곳이 수없이 많습니다 진실은, 대부분의 사람들(전문가를 포함해서)은 Stock(스톡)이라는 무료 또는 저가의 이미지를 많이 사용합니다

구체적인 이미지가 필요할 때, -예를 들어 티컵에 들어가 있는 조그만 강아지의 사진이라든가- 혹은 스스로 만들 시간이나 자원이 없을 때는 스톡 만한 것이 없습니다 스톡 이미지 사이트는 검색으로 찾을 수 있습니다 당신의 프로젝트에 적절하면서도 어떤 면으로는 특이한 이미지를 찾아보세요 사용자의 입장에서는, 사람들은 주로 진정성이 느껴지는 이미지에 이끌립니다 예를 들어 특별하지만 믿음직한 사진이나

이야기가 있는 그래픽처럼요 최고의 이미지는 어느 정도 열린 해석이 가능합니다 프로젝트의 분위기를 형성해주면서도 해석의 여지를 남겨놓는 것이죠

어떤 스톡 이미지는 영향력을 가지기에는 지나치게 일반적일 수 있습니다 예를 들면, 비즈니스 발표에서 항상 보이는 이미지가 있죠 이런 거요 더 현대적이고 전문적인 디자인을 위해서는, 설명이 부족하거나 너무 글자 그대로의 의미에 충실한 이미지는 쓰지 마세요 그보다는 당신의 작업에 더 절묘하고 타당하게 연결되는 이미지를 찾으세요

당연하지만, 내용에 한정된 이야기가 아닙니다 이미지에는 더 기술적인 측면이 있습니다 당신의 작업에 큰 영향을 미치죠 당신이 선택한 이미지가 모든 면에서 완벽하다면 상관없겠지만 만약 이미지가 흐릿하거나 화질이 나쁘다면, 잘못된 인상을 남길 수 있어요 명확하고, 깔끔하고, 왜곡되지 않는 고화질의 이미지를 찾으세요

쉽게 말하면 클수록 좋습니다 작업할 수 있는 재료가 많아지니까요 크고 해상도가 높은 이미지는 프로젝트의 필요에 맞게 자르거나 사이즈를 줄일 수 있거든요 유감이지만, 작은 이미지의 경우엔 반대입니다 작은 이미지를 확대하면, 바로 품질이 떨어져버립니다

그 이유는 대부분의 이미지가 래스터 형식으로 지원되기 때문이에요 그들은 수천 개, 심지어는 수백만 개의 작은 픽셀로 이루어져 있습니다 래스터 이미지를 원래의 사이즈로 보거나 더 작게 볼 때는, 픽셀은 보이지 않습니다 너무 작아서 보이지 않아요 하지만 확대해보면

결과는 그다지 예쁘지 않죠 벡터 그래픽은 래스터와 꽤 다릅니다 벡터 이미지는 크게 혹은 작게, 어떤 사이즈로 만들어도 품질이 떨어지지 않습니다

그들은 픽셀보다 더 복잡한 것으로 이루어져 있기 때문이죠 벡터는 특별한 기하학적 형식으로 제작됩니다 전문 디자인 영역 밖에서 벡터 그래픽을 찾기는 쉽지 않지만, 무엇인지는 알아두면 좋겠죠 어떤 스톡 이미지는 기술적으로는 높은 품질을 보여주지만 있는 그대로 완벽하지 않기도 합니다 이미지의 사이즈가 잘못되었거나, 색감을 조절할 필요가 있을지도 몰라요

다행히도, 요즘엔 아주 기본적인 프로그램으로도 간단한 조정이 가능합니다 다음에 이미지를 고치거나 개선할 일이 생기면, 이 옵션들을 찾아보세요 크로핑(다듬기)은 이미지의 크기나 형태, 초점을 바꾸는데 쓰입니다 다양한 상황에 유용하도록 말이죠 그래픽의 크기가 마음에 들지 않거나, 차라리 잘라냈으면 하는 요소가 있을 때는 크로핑 옵션을 써보세요

코스메틱(미적 효과)조정은 이미지의 품질을 개선해줍니다 밝기, 대비, 채도, 색감 등을 바꿀 수 있어요 선호하는 프로그램에 필터나 설정 기능이 있다면, 당신은 아주 적은 시간과 노력으로도 이미지를 극적으로 바꿀 수 있어요 이미지의 크기를 조절함으로써 당신의 프로젝트에 가장 적절하게 만들 수 있습니다 이것만 기억하세요: 이미지의 품질에 영향을 주지 않으면서 본래 크기보다 크게 만드는 것은 불가능합니다

작업하는 이미지가 충분히 크지 않다면, 다른 이미지로 바꾸는 것이 최선의 방법입니다 대안으로는, 당신이 가지고 있는 이미지를 창의적으로 활용할 방법을 찾을 수도 있겠죠 사진, 그래픽, 그리고 다른 시각 자료를 추가하는 것은 당신의 작업을 더 매력적으로 만들어주는 아주 좋은 방법입니다 아주 단순한 배경 이미지만으로도 당신의 작업은 특별해질 수 있어요 컨셉과 기술 면에서 이미지의 품질에 대해 배운 점만 잊지 마세요

그러면 당신의 작업은 분명히 눈에 띌 거에요 이미지의 기초에 대한 영상, 즐겁게 보셨길 바랍니다 타이포그래피, 컬러, 구성과 같은 다른 디자인 영상도 확인해보세요!

Beginning Graphic Design: Fundamentals

'디자인의 기초'는 미술부터 현대 웹 디자인까지 모든 시각 매체의 기반입니다 대부분을 차지하는 글꼴부터 아주 작은 세부사항도 예외는 없죠

이 예시들의 공통점이 보이시나요? 아주 기본적인 요소로 이루어져있죠 선, 도형, 형체, 질감, 균형 혼자 있을 때는 그 역할이 미미해보이지만 합쳐지면 우리가 보고 만들어내는 거의 모든 것에서 큰 역할을 합니다 스스로를 예술가라고 생각하지 않는 분들에게는 특히 이 기초들이 어렵게 느껴질 수 있어요 하지만 그 기초들로부터 다양한 재료를 활용하는 방법과 간단한 시각 효과를 만드는 방법에 관해 배울 수 있어요

가장 기본적인 요소부터 시작해볼까요 '선'입니다 선이란 두개 이상의 점을 연결한 형태입니다

두툼하거나 가늘기도 하고 구불거리거나 뾰족뾰족하기도 하죠 각각의 특징을 살려 조금씩 다른 느낌을 줄 수도 있고요

디자인에서 선은 굉장히 자주 등장합니다 소묘와 삽화에도 있고 그래픽 디자인 속 질감과 패턴 안에도 있죠 선은 텍스트 구성에 있어서도 많이 활용됩니다 선으로 강조를 더할 수도 있고, 내용을 나누거나 조직화할 수도 있어요 나아가 독자의 시선을 안내하는 역할도 하죠

선을 다룰 때는 무게감, 색감, 질감, 그리고 스타일에 집중하세요 디자인을 전달할 때는 이런 미묘한 자질들이 큰 효과를 내거든요 어디에 선이 숨어있는지 찾아보세요 예를 들면 글자 속에도 선이 있습니다 심지어 서체 안에서도, 다양한 선의 형태를 활용해보면 놀라울 정도로 신기한 작품을 만들 수 있어요

'도형'은 분명한 경계가 있는 임의의 2차원 위 면적입니다 원, 사각형, 삼각형, 그리고 많은 모양을 포함합니다 도형은 크게 둘로 나뉩니다 기하학적 형태 (정형正形) 이거나, 유기적 형태 (자유형自由刑) 입니다 도형은 생각을 시각화하는 것에 있어 필수적인 요소입니다

이미지의 영향력을 키우고 눈에 띄게 만들죠 우리가 도로 표지판과 상징, 나아가 추상미술을 이해할 수 있는 것은 도형 덕분입니다 도형은 일상 속에서 놀라울 정도로 많이 사용됩니다 도형은 내용을 구성하거나 분리하는 것을 도와줍니다 그 외에도 간단한 삽화를 만들거나, 그저 작업물에 재미를 더할 때에도 활용되죠

도형은 너무나 많은 것들의 바탕이기 때문에 중요하다고 말할 수밖에 없어요 디자인 속 도형을 찾아보세요 없는 곳이 없다는 걸 금방 눈치채실 거에요 도형이 3D가 되면, '형체'라고 부릅니다 형체는 3차원으로 현실에 존재할 수도 있고, 함축적으로 표현될 수도 있습니다

이런 경우 빛과 그림자, 그리고 시점으로 깊이를 표현합니다 형체는 2차원의 디자인에 사실성을 더해줍니다 형체가 없다면, 통통 튀는 고무공은 그저 빨간 원에 불과하겠죠 3D 건축물은 직사각형의 연속에 불과하고요 심지어 플랫 디자인에서도 형체와 깊이를 표현하기 위해 미묘한 기술을 활용한답니다

(역자 주: 플랫 디자인, 입체감을 없애고 평면에 붙은 듯한 디자인 기법) 일상 속 형체는 같은 역할을 하지만 규모가 작아집니다 예를 들어 단순한 그림자를 층이 있는 것 같이 보이게 만들거나 대상에 공간감을 부여하는 데 쓰이죠 기본 형체를 활용하면 사실성이 커질 거에요 적절히 활용하면 정말 강력한 도구가 되죠

'질감'은 표면의 물리적인 특징입니다 형체와 마찬가지로, 3차원 – 즉 보고 만질 수 있는 – 이거나 함축적으로 표현될 수 있습니다 현실에 존재했다면 이러한 질감이 있었을 것이다, 고 제시하는 거죠 디자인에서 질감은 평평해 보이는 이미지에 깊이감과 감촉을 더합니다 활용된 요소에 따라 부드럽거나, 거칠거나, 단단하거나 부드럽게 보이게 됩니다

초심자라면 배경이미지에서 질감을 활용해 보세요 그리고 작업물이 얼마나 흥미로워지는지 경험해 보세요 자세히 살펴보면 전혀 예상치 못한 곳에서 질감을 찾아낼 수 있을 거에요 낡아보이는 글꼴이나 반질반질한 아이콘에도 있죠 너무 멀리 가지 않도록 주의하세요

한 디자인 안에서 질감 표현을 과하게 사용하면 디자인이 쉽게 망가집니다 '균형'은 시각적 무게의 균등한 분배입니다 다시 말해서, 독자의 눈을 사로잡는 요소가 무엇인지와 그들이 가지는 무게감을 말하죠 균형은 색감, 크기, 개수, 그리고 여백에 쉽게 영향을 받습니다 초심자라면 균형을 다루는 것이 조금 어려울 수 있습니다

일종의 직관이 필요하거든요 다행히도, 디자인 세계에는 균형의 수많은 변이형을 쉽게 이해하도록 도와주는 예시가 아주 많습니다 대칭형 디자인은 축의 양쪽이 같거나 비슷합니다 양쪽이 같거나 충분히 비슷하게 구성되어서 균형있다는 느낌을 주죠 비대칭형 디자인은 다릅니다

그러나 무게감은 여전히 균등하게 분배되어 있죠 중요한 것들에 강조점을 주었을 뿐, 이 역시 균형있다고 할 수 있습니다 주로 '3분할 원칙'이라는 전략이 활용됩니다 작업 공간이 3×3 그리드로 나뉘어져 있다고 상상하는 거에요 이미지의 중심이 이 선들의 위에 있거나 혹은 가까이 있어야 나머지 공간과 시각적인 균형을 이룬다는 겁니다

이러한 구성이 효과적인 이유는, 연구에 의하면 인간의 눈이 디자인을 스캔할 때 자연스럽게 위와 같은 순서를 따르기 때문이라고 해요 '디자인의 기초'는 결국 큰그림에 관한 이야기입니다 다시 말해 모든 작업물의 작은 세부사항들까지 감상하는 법을 배우는 것이죠 이런 통찰은 거의 모든 프로젝트에 적용할 수 있어요 자신만의 그래픽을 만들어내거나, 작품을 간단히 개선하고 싶을 때에도 쓸 수 있어요

'디자인의 기초' 영상을 즐겁게 봐주셔서 감사합니다 컬러, 타이포그래피, 그 외의 다양한 주제의 영상도 확인해보세요!

캔 목업제작 방법

미리 만들어진 모형에 적용할 상표 등을 그대로 드래그하여 가져옵니다 원본레이어를 복사하여 적용할 상품 바로위 레이어로 이동합니다

create clipping mask 를 적용합니다 처음에 가져온 레이어를 더블클릭하면 원본psd로 이동하고 이동된 psd에서 수정 후 저장합니다 다시 목업psd로 이동하시면 변경된 이미지를 확인할 수 있습니다 뒤에 있는 캔부분은 convert for smart filters 를 활용하여 Blur를 적용합니다 webtong

kr 에서 psd는 다운받을 수 있습니다 감사합니다

웹 에플리케이션 만들기 – 기획

이번 시간에는 기획에 대해서 알아보겠는데요 이 기획이라는 것은 구상 다음에 나오는 단계이지만 구상과 기획이라는 것은 칼로 물을 베는것 만큼이나 아주 밀접하게 관계가 되어있기 때문에 구분짓기는 쉽지는 않습니다 다만 우리가 굳이 절차를 구분한다면 기획이라는 절차가 따로 있는 것이겠죠 기획단계에서 주로 많이 하는것중의 하나가 UI모델링이라는 것을 합니다

UI, 모델링 둘다 익숙하지 않은 말일텐데요 UI라는 말부터 한번 살펴보죠 UI라는 것은 User Interface의 약자입니다 User Interface라는 말은 앞에 있는 User는 사용자라는 뜻이고요 Interface라는 말은 접점이라는 뜻인데 이건 다소 추상적인 표현입니다 결론적으로 말씀드리면 사용자가 시스템을 제어하는데 사용되는 조작장치들을 UI라고 불러요 UI라는 것은 아주 포괄적인 개념이라서 예를들어서 여러분들 스마트폰의 키고 끄는 버튼 또는 노트북의 켜고 끄는 그런 버튼들 그런것들도 말하자면 UI라고 할수 있고요 그리고 우리가 만드는 웹사이트에 있는 버튼 여러가지 화면에 표시되는 여러가지 정보들 이런 모든것들을 포괄적으로 UI라고 부를 수 있을거에요 어쨌든간에 UI라는 것은 결국 사용자에게 주어지는 그 기능을 조작할수 있는 것들을 포괄적으로 "UI라고 한다" 정도로 우리 생각합시다 그 다음에 모델링이라는 말은 예를들어서 이렇게 생긴 건물을 여러분들이 짓는다고 했을때 이 건물을 짓는것은 많은 비용과 자본과 위험이 따르는 일이죠 그래서 우리가 직접 건물을 짓기에 앞서서 이렇게 건물의 모양을 만들어 보는 거에요 그래서 실제로 만들어 놓고 보면 이게 괜찮은 디자인인지 아니면 동선에 문제가 없는지 또는 어떤 정도의 바람에 이 건물이 어떤 피해를 입지 않는지 그런 것들을 훨씬 더 구체적으로 파악해 볼수가 있잖아요 바로 이렇게 직접 만들기 전에 그것을 가상으로 만들어 보는 것을 우리가 건축에서는 모델링이라고 하고 그것을 컴퓨터 쪽에서 차용해서 가져온 개념이 모델링이라는 개념이겠죠 그래서 UI 모델링이라는 것은 사용자 입장에서 동작하는 기능을 실제로 만들기에 앞서서 가상으로 만들어 보는것 그것이 UI모델링 입니다 UI모델링이 중요한 이유는 일차적으로는 제가 생각하기에는 커뮤니케이션 부분에 있습니다

소통을 하는데 있어서 "뭘 만들자" 라고 했을 때 말로 표현을 하게 되면 그 말을 듣는 사람들 한명한명이 완전히 다른 생각을 할 가능성이 매우 높습니다 하지만 무언가를 실제로 만든다는 것은 많은 시간과 비용이 들어가는 일이기 때문에 그걸 만들고 부수고 만들고 부수고 할수는 없잖아요 그렇게 하다보면 기회를 잃어버리기도 하고 또 사이가 안좋아질때도 많습니다 그래서 무엇을 만들고자 하는지를 분명하게 서로가 공유하기 위한 아주 편리하고 분명한 도구로서 우리가 UI모델링을 하는 것이라고 저는 생각해요 그래서 우리가 지금 만들려고 하는 것은 이 생활코딩이라는 생활코딩의 웹사이트를 우리가 처음 만들어보려고 하는 거잖아요? 그래서 그려보면 이런 모양이 대충 될겁니다 보시는 것처럼 이렇게 수업의 제목이 나오고요 그리고 왼쪽에는 그 수업의 항목들이 나오고 그리고 오른쪽에는 이 왼쪽에 있는 항목을 선택하면 오른쪽에 자세한 내용이 보이고요 그리고 이건 나중에 자바스크립트 부분을 설명하기 위한건데요 블랙을 누르면 디자인이 검은색으로 바뀌고 화이트를 누르면 흰색으로 바뀌는 그런 기능을 가지고 있는 버튼입니다 "이런걸 만들어 보겠다"라고 기획자가 또는 실행계획을 세우는 사람이 그림을 그리는 거죠 그래서 구성원들한테 공유해서 피드백을 받고 그리고 서로가 생각하는바가 일치한다는 것을 확인한 다음에 프로젝트에 들어가는 것이죠 그렇게 하는게 기획업무의 많은 부분을 차지하는 건데요 이렇게 간단한 페이지는 사실 특별한 도구가 필요하진 않아요 간단하니까 그런데 우리가 웹사이트를 제대로 구축을한다면 그리고 기능이 많고 많은 사람들이 사용하는 경우에는 페이지만해도 1,000장 짜리 프로젝트가 있다고 들었어요 1,000장짜리 프로젝트는 대부분 실패하긴 하지만 아무튼 상당히 많은 양의 기획서들이 만들어질수 있습니다

그래서 그걸 손으로 하기에는 힘도 들지만 나중에 문제가 생겼을때 수정하려고 하면 아주 많이 힘이 들겠죠 그래서 여러가지 모델링 도구들이 있어요 그중에 첫번째는 말씀드린 것처럼 손으로 그리는 겁니다 간단한건 손으로 그리는게 제가 보기에는 최고에요 그다음에 펜슬이라고 하는 오픈소스 모델링 도구가 있습니다 이걸 이용하면 여러분이 컴퓨터로 모델링을 할수가 있어요 그래서 우리가 어떤 서비스를 구축한다고 하면 거기에서 사용되는 여러가지 공통적으로 사용되는 것들이 있는데 그런것들을 미리 준비해놨기 때문에 여러분들이 훨씬 쉽고 빠르게 모델링을 할수 있다는 장점이 있습니다 그리고 이 펜슬보다도 제가 조금더 좋아하기는 하는데 유료인것은 balsamiq이라는 툴이 있는데요 balsamiq은 사람이 손으로 그린것같은 느낌의 어떤 모델링을 할수 있도록 도와주는 도구이고 기능도 상당히 괜찮기 때문에 한번 구경삼아서 사이트에 방문해보시면 좋을것 같습니다 그리고 기획자들이 가장 많이 사용하는 도구는 파워포인트 입니다

파워포인트는 기본적으로 프리젠테이션을 위한 도구이지만 파워포인트 안에는 소프트웨어의 기획을 하는데 있어서 도움을 줄수 있는 여러가지 기능들이 많이 포함이 되어있기 때문에 파워포인트를 이용하는 경우도 많이 있습니다 이렇게 해서 우리가 이번시간에는 기획에 대해서 살펴보았는데요 사실 기획이라는것은 굉장히 중요한거에요 기획을 아주 꼼꼼하고 그리고 사려깊게하지 못하면 결국에 프로젝트는 반은 실패한거라고 볼수 있어요 기획이라는 것은 아주 심도있는 분야이기 때문에 이것은 이것대로 별도의 어떤 트레이닝이 필요할만큼 아주 중요한 부분입니다 다만 우리 수업에서는 기획이 목적이 아니라 우리수업의 목표는 결국에는 개발이기 때문에 기획에 대한 부분은 이렇게 간단하게 짚고 넘어가는것으로 마치도록 하겠습니다

Beginning Graphic Design: Color

색깔 색은 디자인과 일상에서 필수적인 역할을 합니다

이미지로 눈길을 이끌기도 하고 특정한 기분이나 감정이 들게도 하고 심지어는 단어를 일체 쓰지 않아도 의사소통을 가능하게 합니다 그렇다면 어떤 색들은 조화롭고 어떤 색들은 아닌지 어떻게 알 수 있을까요? 답은 간단합니다: 색채 이론이죠 예술가와 디자이너는 수 세기 동안 색채 이론을 지켜왔습니다 그리고 누구나 배울 수 있어요

디자인을 위해 색을 고르거나, 입을 옷을 고를 때와 같은 다양한 상황에서 색채 이론을 활용하면 자신감을 가질 수 있습니다 약간의 통찰만 있다면, 색을 완전히 새로운 방식으로 보게 될 거에요 기초부터 시작해볼까요, 아주 기초부터? 기초 교육과정을 떠올려 보세요 학교에서 원색과 동화색(2원색을 혼합한 색) 배운 거 기억하시나요? 그렇다면 이미 색채 이론에 대한 지식을 갖고 있는 거나 마찬가지에요 빨강과 노랑은 주황을 만들고, 노랑과 파랑은 초록을 만들고, 파랑과 빨강은 보라를 만들죠

이 색들을 섞으면, 중간 빛깔을 더 많이 만들 수 있어요 다홍색이나 라임색처럼요 모두 모이면, 색상환(고리 도표)을 형성합니다 (이름이 어디에서 유래되었는지 알겠죠?) 이제 한 걸음 나아가서, 색상, 채도, 명도에 관해 알아볼게요 일상에서 접할 법한 용어는 아니지만, 색의 미묘한 차이를 이해하는데 도움이 됩니다

인테리어 상점의 페인트 칩들의 색처럼 다양할 때요 색상이 가장 쉽습니다; '색'의 다른 말일 뿐이에요 채도는 강도를 의미합니다 다른 말로는 색이 얼마나 은은한지 혹은 선명한지를 말해요 명도는 색의 어두움과 밝음에 관련이 있어요

검은색과 흰색 사이에서 판단하죠 보시는 것과 같이, 명도는 다양한 빛깔을 만들어낼 수 있어요 붉은빛 도는 어두운 갈색에서부터, 밝은 파스텔 분홍색까지요 그렇다면 색을 전문적으로 사용하는 것처럼 보이기 위해서 이들을 어떻게 활용해야 할까요? 사실 색의 조화에 기초해서 만들어진 믿을 만한 공식이 이미 존재해요 큰 도움이 되죠

색상환만 있으면 된답니다 가장 쉬운 조화 공식은 단색 설계입니다 한 가지의 색만 사용하니까요 색상환에서 한 부분을 선택하고, 채도와 명도에 관한 지식으로 변화를 만들어내면 됩니다 단색 설계의 최대 장점은 조화가 보장된다는 점이죠

유사색 설계는 색상환에서 이웃한 색들을 사용합니다 빨강과 주황 혹은 파랑과 초록 같은 좀 더 차가운 색들이 있겠죠

색깔들을 가지고 실험해보는 것을 두려워 하지 말고, 자신만의 특별한 해석을 보여주세요 사실 이 공식은 단지 당신에게 영감을 주는 시작점일 뿐입니다 보색은 색상환의 정반대에 위치합니다 파랑과 주황처럼요 혹은 클래식한 빨강과 초록처럼요

지나치게 단순한 보색 설계를 벗어나고 싶다면, 더 밝거나 어둡거나 채도를 낮춘 색들로 변화를 줘 보세요 인접 보색 설계는 보색의 양 옆의 색을 활용합니다 비슷한 대비 효과를 주면서도, 더 다양한 색으로 작업할 수 있어요 (더 흥미로운 결과가 나오기도 합니다) 삼색 설계는 동일한 간격 상의 세가지 색을 활용합니다

색상환에서 완벽한 삼각형을 이루죠 이 조합은 꽤나 인상적입니다 특히 원색 혹은 동화색을 포함하면 더 그렇죠 작업에 활용할 때 염두에 두세요 사색 설계는 색상환에서 직사각형을 형성합니다

하나가 아닌 두 보색 조합을 활용하죠 이 공식은 한 가지 색을 주색으로 삼고 다른 색들을 강조용으로 활용할 때 가장 조화롭습니다 색에 있어서는 몇 가지 고전적인 '할 일과 말 일'이 존재합니다 예를 들면, 같이 쓰였을 때 확 튀어버리는 색들을 본 적이 있나요? (이렇게!)(미안해요) 해결책은 완화시키는 것입니다

말 그대로에요 아주 간단한 방법이 있죠 한 가지 색으로 시작해서 그 색의 밝기, 어둡기, 혹은 채도를 조정해보세요 가끔은 지나친 대비가 독이 될 때도 있답니다 가독성은 모든 디자인에서 중요한 요소입니다

당신이 쓰는 색들은 또렷하면서도 눈에 쉽게 들어와야 합니다 때때로 색을 사용하지 않는 방법도 있죠 아니면 적어도 모든 디테일에 쓰지는 않는다거나 검은색, 흰색, 회색과 같은 무채색은 디자인의 균형을 맞춰줍니다 당신이 색을 실제로 사용할 때, 아주 유용하죠

모든 색은 메세지를 담고 있습니다 프로젝트의 분위기를 고려해서 적절한 색을 선택하는 것이 중요해요 예를 들어, 밝은 색들은 재미있고 현대적인 분위기를 연출합니다 채도가 낮은 색들은 좀 더 형식적인 느낌을 줍니다 내용에 따라 달라지기도 해요

색이라는 것이 얼마나 유연한지 놀랍지 않나요? 색감 설계에 관한 아이디어는 모든 곳에서 얻을 수 있어요 광고, 브랜딩, 유명한 예술 작품에서도 아니면 웹에서 컬러 팔레트를 검색하거나 직접 만들 수도 있어요 경력 많은 디자이너들도 그들 주변에서 영감을 얻는답니다 자신이 좋아하는 걸 찾아서 자기 것으로 만드는 데에는 아무 잘못도 없어요

어디를 보아도 색, 색, 더 많은 색이 있습니다 당신의 작업에 활용하는게 겁이 날 수도 있지만, 그럴 필요 없어요 오늘 색채 이론에 대해 배운 것을 기억하면서 계속 실험해보세요 머지않아 조화로운 색을 선택하는게 천성이었던 것처럼 쉬워질 거에요! 색의 기초에 관한 영상, 즐겁게 보셨길 바랍니다 타이포그래피, 이미지, 구성과 같은 다른 디자인 영상도 확인해보세요!

이것저것 다 하는 인하우스 디자이너~ 약간은 기분이 좋아지는 작업 영상?

거지 패션으로 하루를 시작합니다 토마토와 두유를 챙겨가고 있어요

아침 식사 대용 이 이미지 괜찮나? 아 이걸 어떻게 딸 것인가 고민중 구름을 따자! 펜툴로 한번 따보자! 핵 노가다

음 이건 아닌거 같아 패스 없앰 어떡하징? 지우개로 지우자 그냥~ 속이 다 시원ㅋ 기분 좋아~~~ 지우개는 블러가 들어있는 브러쉬로 선택해서 구름이 자연스럽게 분리될 수 있도록 카카오 채팅 무엇? 세심하게~ 그래도 나름 세심해야 돼요 구름 모양 몽실몽실 초 힘듬 구름이 왜이렇게 많은지 그리는게 더 빠를 뻔ㅋ 내가 원하는 톤으로 보정도~ 약간 그린 빛이 좋군 이미지 사이즈 살짝 줄이고~ 일러스트레이터에 가져옴 점심시간! 뭐 먹을지 메뉴 고심해서 선택중 먹는 것도 고민 선택 완료 자 다시 시작해볼까? 이번엔 보트를 따겠음 올가미 선택 툴로 대충 붙여넣기! 적당한 크기로 줄이기 어디다 둘까? 회전도 시키고 여기가 좋겠군 다시 지우개 툴로 지워준다 자연스럽게 이미지에 흡수되도록 배경에 비해 너무 밝은 것 같군 보트 뒤에 물이 넘 밝은듯 그 부분만 선택해서 어둡게 처리 살짝만~ 좋아 이정도면 됐어 자, 이제 패키지 디자인을 시작하자 이제껏 해놨던 디자인에서 소스 찾는 중 카페인도 섭취하고 택배 박스 디자인 하는 중 먹색만 가능하다고 함

칼 선에 맞춰서 상상하며 디자인 중 택배 박스에 취급 주의가 빠지면 안되지 여기저기 넘나들며 디자인 바닥면은 사선으로 열지 못하게 표시 제품 사이즈를 기재하기로 함 몇 mm냐? 음 지름은? 이런 씰링 테이프 장식도 넣기로 함 얘도 블랙으로 처리

C 0, M 0, Y 0, K 100으로 하면 블랙임 위치를 예쁘게 세심 그 자체 가로 선도 넣고 씰링 테이프 장식 넣으니까 옆에 로고랑 부딪치는 느낌 빼버리자 단위 변환 찾아보기 제품 사이즈를 기재중 펌프까지의 길이는? 원하는 폰트 찾기 이런 사이즈 기재도 디자인 요소로 활용될 수 있음 크기 비례 잘 봐야겠죠? 지름은 파이(Ø)도 기재하자! 부피도 쓰고~ 웰-메이드 로고~ 이게 낫나 저게 낫나 여긴 두 줄이 낫겠군 우리 브랜드의 메인 슬로건

Full of Goodness 지그재그 문양 추가 디자인은 이런 디테일이 중요하다 바쁨 바쁨~~~~ 한쪽 면은 이런걸 넣어볼까? 로고도 크게 넣어줘야지 슬로건도 크게 넣어줘야지 슬로건 서브 문구 기재중 디자이너는 영어도 잘해야 하나? 가끔은 궁금함

ㅋ 메인 슬로건 가로 길이에 딱 맞게 셋팅 갑자기 그림을 위에서 아래로 투시 있게 해달라는 요청 너무행 다했는뎅ㅠㅠ

하면 되지 뭐 ㅠㅠ 디자이너는 원래 이런 것임 하고, 엎고, 하고, 엎고 반복임 그래도 괜찮아 난 그림에 특화된 디자이너니까 뚝딱 뚝딱! 대고 그리세요 펌프 생성 완료 이제 몸통 까짓거 금방해 ㅋㅋㅋㅋㅋㅋ 테두리 블랙 로고도 넣어주고 세제가 담긴 경계선도 그려주기 펌프 장식 투시에 맞게 넣어줘야겠죠? 끝 이렇게 됐어요! 그럴듯합니까? 바뀐 부분이 조금 있음 이번엔 섬이다! 일을 아주 사서해요 ㅋㅋㅋ 교회 십자가 없애고 로고 넣기 입체여야겠죠? 흠 놀이동산으로 꾸미고 싶어서 서치 이게 좋겠군 예시로 한 번 넣어보기 괜찮나? 반전도 시켜보고 오케이, 이제 따자

핵 복잡하네? 펜툴로 하나하나 누끼 따는 중 노가다 뭐이리 많이 달렸어? 관람차 하하 내가 왜 이걸 선택했지? 시작했으면 끝을 봐야지 땄는데

안쪽이 문제로다 색깔 선택으로 지워봤지만 지저분하게 누끼가 따지는 상황

에라이 펜툴 들었다 까짓거 하면 돼

개고생중 와 이걸 언제 다 따나

? 절반 했음 그와중에 스티커 작업 들어옴 군대 무늬? 넣어달라는 요청 마구마구 그리기 흠

아닌 것 같아 무늬 다시 그려보기 색깔의 흐름도 생각하기 강약 조절은 색깔로부터 모양 다듬기 완성한 택배 박스 시안 디자인 괜찮나요? 관람차 다 따서 섬 하나 예쁘게 꾸밈 아르 랜드~~ 자동차도 있음 ㅋㅋㅋ 귀엽죠? 비행기가 날라다니고 간판?에 새도 앉아있음 아르랜드 섬

[자막ON] [프론트엔드 퍼블리싱 취업성공] [중급예제] 웹호스팅 서비스 가격표 (nth-of-type, befre, gradient, fontawesome)

이번 영상은 20분 완성이 아니라 50분 완성이 되었습니다 죄송

ㅠㅠ [정정] 폰트어썸 유니코드는 가상클래스 content 안에 넣을 경우에 필요합니다 이번 예제에는 유니코드 사용하지 않았습니다 [참고] 그라디언트 배경 아이콘에 쓰인 폰트어썸 아이콘 : paper-plane, plane, rocket [참고] 리스트에 쓰인 폰트어썸 아이콘 : check, times 나중에 지울거지만 가상의 보더를 꼭! 그리고 시작하세요

그래야 레이아웃 구조감이 생깁니다 [참고] height:auto 로 만들어진 코드를 보실 수 있습니다 auto 기본값이니 꼭 필요하지 않습니다 패딩 마진 모두 숫자 1개 적으면 상하좌우, 숫자 2개면 첫번째 상하, 두번째 좌우입니다 매우 중요해용~~ㅎ box-sizing:border-box를 주지 않으면, 실제 너비는 342px 가 됩니다 (300+20+20+1+1) 배경 그라디언트 3가지 값(방향, 시작색상, 종료색상) 공통적인 속성과 값은 항상 하나의 선택자에 담고, 변하는 속성만 따로 선택자를 만들어 지정합니다 nth-child : 출연하는 엘리먼트 순서만 체크(태그 타입 체그 안함) / nth-of-type : 해당 태그 타입 중에서만 출연하는 엘리먼트 순서만 체크 이것만 기억하시면 포지션 속성 오케이~!! 부모요소 relative / 자식요소 absolute 넘친(overflow) 부분 감춰(hidden) skew를 사용하는 방법입니다 이 방법 더 추천~!! transform: skewY(-10deg) transition은 hover가 아니라 항상 원본상태에 줍니다

z-index는 항사 position은 세트로 사용됩니다 복습만이 살길입니다 반드시 3번 복습하세요 1번) 실습없이 눈으로 그냥 부담없이 보기 2번) 실습으로 따라하면서 예제 만들기 3번) 영상 참고 없이 스스로 만들기 구독자 없어서 영상 제작 의욕 떨어지지 않게 '구독과 좋아요' 부탁해요~^^

[두부플러스] 홈페이지 만들기 〉 Step 02.기본정보 설정 및 웹사이트 노출하기

STEP01 일반 정보 설정 [관리 모드]> [환경 설정] [사이트 관리]> [일반 정보]를 클릭하십시오

[계좌 정보] 회사 이름 (웹 사이트 이름) : 웹 사이트의 회사 이름으로 설정됩니다 사용자 이름 : 계정을 만들 때 설정되는 하위 도메인이므로 변경할 수 없습니다 이메일 : 관리자 ID로 사용되며 웹 사이트의 기본 이메일 주소로 설정됩니다 암호 : 관리자 암호를 변경할 수 있습니다 SNS 계정 로그인 설정 : 관리자에게 로그인 할 때 소셜 미디어 계정으로 로그인 할 수 있습니다

(팁) 일반 정보의 회사 이름 (웹 사이트 이름)은 SEO 설정과 밀접한 관련이 있습니다 그래서 올바르게 입력하십시오 [기업 세부 정보] 전자 메일 : 알림 서비스의 기본 전자 메일 주소로 설정됩니다 (팁) 일반 정보는 웹 사이트의 바닥 글 정보로 표시됩니다 그것은 상업적 목적 웹 사이트를위한 웹 사이트의 필수적인 부분입니다

STEP02 웹 사이트 노출 [디자인 모드]를 클릭하십시오 [바닥 글 주소]에서 [설정 편집]을 클릭하고 [회사 정보 설정] 노출 될 정보를 선택하려면 [√]을 클릭하고, 주문을 설정하려면 [편집] (팁) [>]을 클릭하면 정보를 변경할 수 있습니다 (팁) 편집 된 정보는 [관리 모드]> [환경 설정]> [사이트 관리]> [일반 정보]

1-12 Web Design Trend

이번 시간에는 웹디자인 트렌드 7가지에 대해서 알아보도록 하겠습니다 첫번째로 작년에 이어서 계속해서 백그라운드로 고화질 이미지 또는 비디오를 삽입하는 것입니다 이미지나 동영상을 화면에 가득 채워서 보여주는 기법인데요 사이트에 접속하자 마자 방문자에 시선을 한눈에 사로잡기 때문에 여전히 많이 사용되고 있습니다

작년과 다른 점이 있다면 일반 고화질 이미지보다는 직접 그린 일러스트를 삽입하는 것입니다 또는 정적인 이미지보다 동영상이 훨씬 효과적이다 그러나 사례를 한번 보도록 하겠습니다 여기 보시면 고화질 이미지를 사용을 해서 지금 로딩되는데 약간의 시간이 걸린 것을 확인할 수가 있습니다 이렇게 고화질 이미지를 사용을 하고 있고요 이번에는 동영상이 탑재된 메인 패널 슬라이드를 보실 수가 있는데요 정적인 이미지보다는 동적인 이미지가 훨신 더 집중시키는 힘을 가지고 있는 것을 확인을 하실수가 있습니다 2번째로 단색과 인터랙션을 가진 대비색을 사용하는 것입니다 해당 사이트의 메인 컬러나 컨샙 컬러를 일관된 색으로 전채를 유지시키고 사용자의 유도가 필요한 부분에는 대비되는 색으로 집중시킵니다 여기 사례를 보시면 이렇게 푸른 계통의 한 컬러로 전체적으로 통일을 시키고 부분적으로는 흰색으로 포인트를 주고 있어서 사이트가 전체적으로 선명한 느낌이 들도록 하고 있습니다 세번째로는 카드레이아웃 디자인입니다 작년에 이어서 올해도 여전히 카드레이아웃이 유행할것이고 대표적인 사이트로는 pinterest가 있습니다 카드 형태에 장점으로는 배치와 재배치 간의 작업이 수월하기 때문에 반응형 웹사이트 제작 시 아주 유용하게 사용이 되고 있고요 그리고 정보의 양에 따라서 크기 조절이 아주 쉽고 사용자들이 더욱 빨리 볼 수 있기 때문에 클릭을 유도하는 장점을 가지고 있습니다 사례로 이렇게 pinterest를 보실텐데요 pinterest는 홈페이지 전체가 카드레이아웃 상태로 되어있고 카드에 담고있는 이 정보에 양에 따라서 자유롭게 지금 배치를 시키고 있습니다 다른 사례를 보시면 네 이렇게 마찬가지로 홈페이지 전체가 카드레이아웃 되어 있지만 pinterest와는 달리 일정한 그리드 간격을 유지하고 있습니다 네번째로 플렛 디자인 아이콘에 변화입니다 아이콘는 테스트가 아닌 간단한 인포 그래픽으로 정보를 전달하는 데 훨씬 효과적이기 때문에 자주 사용을 하는데요 작년에는 면으로 색이 꽉찬 형태였다면은 요즘 최근에는 라인형태로 심플한 스타일로 바뀌고 있습니다 홈페이지에서도 버튼들을 한번 보시면 면으로 되어있던 버튼들이이 선으로 지금 많이 바뀌고 있는 추세에 있구요 이렇게 아이콘을 다운로드 받을 수 있는 사이트에도 보시면 메인에 노출된 아이콘들을 확인을 해보시면 이런 형태로 면으로 찾는 아이콘들 보다는 선으로 더 간단하고 심플한 아이콘들을 많이 노출시키고 있는 것은 확인을 하실수가 있습니다 다섯 번째로는 시네마그레프인데요 영화와 사진의 합성어로 사진에서 부분만 움직이는 효과를 말합니다 sns에서 움짤 등에 그런 콘텐츠 변화로 나타나는 트렌드 중에 하나이고요 이미지보다는 몰입도가 훨씬 높기 때문에 주목성이 높은 큰 장점을 가지고 있습니다 사례를 한번 보시면 이렇게 정적인 이미지에서 특정 부분만 이렇게 동적인 효과를 주고 있는 것을 확인을 한 실수가 있습니다 여섯 번째로는 롱스크롤입니다 모바일 환경이 계속 발전함에 따라서 수직적인 흐름에 디자인인 롱스크롤도 계속해서 트렌드가 되고 있는데요 컨텐츠가 많다면 무리일수도 있겠지만 한 페이지 안에서 모든 색션을 담아서 스토리텔링 컨셉을 만들 수가 있습니다 섹션을 명확하게 구분짓지 않고 자연스런 흐름으로 이야기했듯이 진행하는 방식으로도 컨텐츠를 풀어나갈 수가 있는데요 그 사례로 요즘에는 롱스크롤 페이지가 많기 때문에 많은 페이지에서 보실 수가 있으실텐데요 이런 식으로 페이지를 내릴 수록 어떤 흐름을 가지고 있고 콘텐츠들이 이렇게 점점 나타나는 형태로 홈페이지에 컨셉을 끌고 가고 있는 것을 확인 하실수가 있습니다 마지막 일곱 번째로 리치 애니메이션입니다 플렛디자인이 생기면서 필연적으로 생긴 애니메이션 효과는 깔끔함과 동시에 약간 재미없는 플렛 디자인에 단점을 보완하기 좋은 효과입니다 정적인 홈페이지에서 생기를 불어넣는 듯한 그런 느낌을 주는데요 팝업 알림 효과나 패럴랙스의 스크롤링 그리고 오버효과 등이 있습니다 하지만 너무 많은 효과를 넣어버리면은 사용자에 흐름을 방해를 할 수가 있기 때문에 적당히 사용을 하시는게 좋습니다 사례를 한번 보도록 하곘습니다 이렇게 보시면 호버했을 때 이렇게 컬러가 바뀌면서 택스트가 위로 살짝 올라오는 이런 효과를 주고있고요 다른 사례로는 이렇게 스크롤을 내리면 내리는 그 시점에 따라서 부분적으로 이 텍스트와 콘텐츠들이 나타나는 효과를 주고 있습니다 지금 보신것처럼 방금 앞부분에 로딩 효과를 주고있고 또 로딩 효과가 끝나고 나면은 동영상과 동시에 기본 콘텐츠가 나타나고 있는데 다 동적인 이미지를 나타내고 있습니다 디자인 트렌드는 흐름이 굉장히 빠르기 때문에 한상 트렌드를 읽기 위해서는 사례를 많이 보는 것이 가장 중요합니다 외국 사이트나 국내 사이트들 중에서도 디자인이 잘 된 페이지들을 모아둔 그런 사이트들이 많아서 참고를 하시면 좋을 것 같습니까

Diseño Web 20 – Tipografía

디자인 부분에 다음 요소는 글꼴 유형, 즉 글꼴입니다 내 조언이 방법으로, 때마다 새 작업을 입력, 입력 체계의 서로 다른 스타일로, PC에 다운로드 한 이미지의 은행을 가지고있다 웹 페이지를 만들고, 가지고, 더 많거나 적은 특정 다운로드 한 글꼴의 팬 유형의 유형, 그것은 당신이 모든 스타일의 매우 중요합니다

각 페이지는 타겟 고객 및 회사를 전달하고자하는 이미지에 따라 다른 소스가 필요합니다 예를 들어, 경우 클라이언트가 심각 프로젝트를 전달하고자하는 경우 회사는 골을 원한다; 당신이 심각한 소스를 넣어 가지고 있기 때문에 당신이 만화 산세 MS를 넣어가는 것이 아니다, 당신은 아마도 이러한 곡선과 둥근 마무리, 스타일이있는 서체를 넣어 가지고 있기 때문에 예를 들어, 세련된 옷을 저장하기 위해, 그러나 그것은 읽을; 그것은뿐만 포쉬로 진부하거나 소스가 말하는 것을 이해하지 일이 아니다 예, 예를 들어, 페이지 인 청소년 프로젝​​트 것을 현대 편지로 뭔가 청소년, 그래서, 거기 당신은 설정 한 당신은 셀틱 문자로, 아일랜드의 줄에 페이지를 만들려고하는 경우 문제는 당신이 회사는 클라이언트가 투영하고자하는 소스가 더 맞는 것으로 전망하고 싶어 볼 필요가 있다는 것입니다

제목 잘 띄는 주요 것에 매우 큰 문자를 넣어 기억; 정상 크기 당신이보고 싶은 것을 넣어하지 않습니다, 당신은 강조하고 대담한해야합니다 그리고 그 일이 당신은 그들이 가장자리에 붙어 넣지 마십시오, 더 눈에 띄는 싶지만에 매우 큰 영역이있을 것이다 그 빈의 주위에, 그래서 그는 시력을 갈 것입니다 난 당신이 모든 소스가 거기 형식으로 변환 웹, 즉, "TTF", "EOT", "WOFF", "SVG"한에서 당신을 확보, 기억; 에 확인 그들은 모든 형식입니다 어쩌면 당신은 이미이 있기 때문에 동영상 설명에 나는, 형식의 소스 남아있다, 당신은 변환 할 수있는 곳을 링크 드리겠습니다 소스는 당신이 알 수 있도록 다음 나는 당신에게 링크를 드리겠습니다, 배출하지만, 다른 확장을 갖고 싶어 당신이이 이미지를 다운로드 할 수있는 알고 싶은 경우에, 잘, 구글 글꼴은 많은있다; 하지만이 이미지 은행과 더 많은 페이지가 있고 당신을 나는 동영상 설명에 링크를 떠날거야

우리는 글꼴을 본 적이 한 번 음, 우리는 애니메이션을 볼 수 있습니다; 이는 다음의 요소입니다