나는 보통 팔자에 밖으로 사용 참조 헤더의 세 가지 종류가 있습니다’인터 웹-탐색 헤더,전체 사진 헤더와 환영 매트 헤더. 블로그 헤더를 만드는 방법에 관심이 있다면,당신은 우리가 창조의 핵심 하자면 내려 전에 각 유형에 대한 장단점을 알고 있어야합니다.
탐색 헤더
탐색 헤더는 비 사진 기반입니다. 예를 들면,나의 웹사이트의 맨 위에,나는 중요한 페이지 또는 가입 모양에 연결플러스 나의 로고가,있는다. 보세요.
당신이 미니멀리즘의 팬이야 사람들이 정말 이미지에 의해 산만하지 않고 당신의 쓰기에 초점을 얻고 싶은 경우에 이와 같은 탐색 헤더는 이상적입니다.
그것은 또한 당신이 새로운 경우 갈 수있는 좋은 경로입니다,당신의 브랜드를 파악하지 않은,아니면 그냥 일어나서 온라인으로 실행해야.
레이아웃은 돌로 설정되지 않았습니다—탐색 헤더는 모든 종류의 방법으로 배치 될 수 있습니다. 로고가 텍스트 링크 위의 중앙에 어디 당신은 아마 일부를 보았다,또는 그냥 링크(또는 그 반대)로고가있을 수 있습니다.
이 헤더는 종종 전체 사진 헤더 및 환영 매트와 같은 추가 블로그 헤더(내 사이트에는 실제로 그 아래에 다른 헤더가 있음)와 조화를 이룹니다.
사진 헤더
사진 헤더 스타일은 매우 눈길을 끄는 정말 당신을 그립니다. 당신은 당신의 블로그에 사진 헤더를 원하는 경우,피사체가 될 것입니다 무엇에 대해 생각. 그것은 사람의 사진이 될 것인가? 당신,또는 당신과 당신의 가족,또는 당신의 이상적인 고객의 일부 표현처럼? 아니면 풍경,패턴,만화/아이콘 또는 비디오의 일종을 갖춘 사진이 될 것인가?
이 예제를 다음에서 확인하십시오 AlexTooby.com.알렉스는 자신의 사진 플러스 그녀의 과정에 가입 할 수있는 강력한 클릭 유도 문안 환영 매트 아이디어의 비트를 사용합니다.
사진 작품,신규 이민자 및 반환 방문자 모두. 왜? 그녀는이 헤더의 강도를 강화하는 역할을 몇 가지 미묘한 시각적 요소(이 나중에 더)를 사용하기 때문에. 인스 타 그램 인터페이스가 그것을 조롱 그녀는 그녀의 전화를 들고,그녀는 그녀가 당신이 읽고 싶은 텍스트를 향해 찾고.. 당신의 눈은 자연스럽게 클릭에 대한 밝은 분홍색 버튼 아래로,단어를 통해 다음,그녀의 얼굴에 그려집니다. 이것은 그녀가 스크린의 왼쪽에 떨어져 보는 경우에 보다 적게 효과적일 것입니다.
프로 팁: 복사 또는 버튼을 향해”에서”직면 사람을 갖는 것은 당신이 사용할 수있는 닌자 디자인 트릭입니다,너무.
사진 헤더는 분위기를 설정하고 조치를 취할 독자를 구동 할 수 있습니다. 사진 헤더가 크기 때문에,그들은 페이지에 다른 산만을 차단하고(알렉스의”시작 무료 코스”버튼 등)당신이 그들을 원하는 정확히 무엇에 초점 독자를 도와줍니다.
환영 매트 헤더
인터넷에서 볼 수있는 일반적인”환영 매트”는 전체 화면 인계이며,이를 수행하는 데 도움이되는 도구가 있습니다.
당신이 당신의 전체 페이지를 인수하지 않으려면 또는,당신은 또한 환영 매트 또는 당신이 제공하고 특별한 공짜 물건에 대한 가입 양식처럼 행동하는 부분을 설정할 수 있습니다. 그게 어떻게 생겼는지 확실하지 않습니까? 내 웹 사이트에서 아래 이미지를 확인하십시오. 나는 모든 방문자가 미래의 이메일 및 프로모션에 적합한 청중과 내 이메일 목록을 구축 할 수 있도록 먼저보고 싶은 무료 전자 코스를 제공하고 있습니다. 내 블로그 항목이 아래에 표시되므로 방문자는 아래로 스크롤하여 최신 게시물을 볼 수 있습니다.
이제 세 가지 스타일을 보았으므로 웹 사이트의 블로그 헤더를 만드는 방법에 대해 이야기 할 시간입니다.
브랜드로 보이는 블로그 헤더를 만드는 방법
“브랜드”라는 용어는 공식적이고 위협적으로 들리지만 결코 두려워하지 않습니다! 당신은 단지 몇 가지 중요한 것들에 초점을 맞출 경우 그것은 실제로 매우 간단합니다. 즉,색상(종종 로고에서 발견됨)과 글꼴.
프로 팁: 폴더안에 너자신을 위해 상표 가이드를 조립하십시요 그래서 너는 쉬운 접근을 위해 이 정보를 진로를 쫓을 수 있는다(너의 로고와 함께)언제나.
멋진 인쇄 가이드를 만들지 않더라도 스티커 메모에이 정보를 적어 모니터에 보관할 수 있습니다. 그것은 당신에게 시간의 짐을 결국에는 저장할 것이다! 이제 몇 가지 디자인 요소를 분해합시다.
당신의 색상을 선택
당신은 당신이 당신의 브랜드에 사용하도록 선택한 몇 가지 색상이있을 수 있습니다,하지만 시작하기 좋은 장소는 당신의 로고입니다. 로고 색상은 웹 사이트,브랜딩 및 블로그 헤더를 통해 사용하기에 좋습니다. 일관성이 핵심입니다-당신은 핫 핑크를 특징으로하는 경우,어쩌면 당신의 사진은 그들에게 핑크의 한 요소 또는 전체 핑크 캐스트가,또는 어쩌면 당신은 검은 색과 흰색을 사용하고 다른 방법으로 색상을 당겨.
YouBabyMeMummy.com 그녀의 딸과 함께 자신의 흑백 사진에 오버레이로 그녀의 로고 위에 화려한 풀 컬러 버전을 삽입하여이 아름답게 않습니다. 이 사진 헤더는 정말 대담하고 매력적인 방법으로 그녀의 이야기로 당신을 끌어. 당신이 멋진,전체 화면 이미지의 더 많은 예를보고 싶다면 그녀의 사이트 주위를 클릭합니다.
그리고 당신은 여전히 당신의 브랜드에서 사용할 색상을 알아 내려고 노력하고 있다면,색상 심리학에 대한이 기사는 매우 드러납니다!
글꼴 선택
세련된 또는 브랜드 글꼴을 헤더에 바로 통합하는 것은 메시지를 전달하는 매우 적절하고 빠른 방법이 될 수 있습니다. 에 루시에서이 매우 독특하고 눈길을 끄는 이미지처럼 이상 ByLucinda.co.uk.
이 바다 풍경은 자연 요소를 많이 포함하는 그녀의 브랜드와 잘 어울리 며 우아하면서도 시원한 분위기를 보여줍니다. 이 여자에 대한 시간 새로운 로마 없습니다! 그녀는 또한 밝은 녹색 직사각형 스트립에 오른쪽에 그녀의 소셜 미디어 링크를 보여주는 영리한 방법이 있습니다. 그것은 큰 대담한 사진과 함께 상단 탐색을 연결하고 의도적 인 방법으로 페이지 아래로 눈을 당겨하는 데 도움이됩니다.
당신은 글꼴 다람쥐와 다 폰트 같은 장소에서 온라인 정말 재미,무료 글꼴을 찾을 수 있습니다. 이러한 무료 글꼴의 대부분은 바로 칸바와 피 몽키 같은 프로그램에 내장되어 있습니다. 그러나,그들이 자유롭기 때문에,누군가 다른 사람(경쟁자 조차)당신이 원하는 것을 사용할 수 있었다 더 높은 기회가 있다.
당신이 당신의 웹 사이트의 본문이나 헤드 라인에 애호가 글꼴을 사용하려면(즉,하지 이미지),당신은 구글 글꼴에 대해 배울 시간이 좀 걸릴해야합니다. 그리고 웹 디자인을 위해 사용할 것이다 글꼴이 지도를 위해,이 3 개의 계명에서 검사하십시요.
시각적 요소 통합
브랜드 블로그 헤더를 작성할 때 어떤 시각적 요소를 포함할지 생각해야 합니다. 로고,사진 및 큰 지우기 버튼을 사용하여 예제를 검토했습니다.
에서 젠 ToastMeetsJam.com 그냥 않습니다. 당신은 지루한 스프레드 시트에서했던 것처럼 그녀는 테이블에 드롭하지 않았다-그녀는 그녀의 양식 필드와 원형”이동”버튼과 함께 예술적인 경계와 큰 글꼴을 사용했다.
그녀는 완벽하게 디자인에 그녀의 이메일 가입을 통합하는 방법을 참조하십시오? 뿐만 아니라 그녀는 애니메이션과 친절 찾고 자신의 사진과 함께 당신을 참여하지만,그녀는 또한 텍스트와 양식에 초점을 유지하기 위해 깨끗하고 회색 배경을 활용하고 있습니다. 산만 한 패턴이나 이미지는 그 양식을 작성하고 앞으로 이동의 핵심 작업에서 당신을 멀리 유혹 없습니다. 그것은 당신이 그녀의 무료,5 일 코스를 얻기 위해해야 할 일을 더 명확 할 수 없습니다.
디자인 준비
훌륭한 블로그 헤더의 몇 가지 예를 보았지만 다음에 무엇을해야합니까? 자신의 블로그 헤더에가는 얻으려면,당신은 몇 가지 디자인 도구 및 이미지 크기 정보를 수집해야합니다.
디자인 도구
사용자 정의 블로그 헤더를 만들기 위한 필수 디자인 도구는 사용하기 어렵거나 비쌀 필요가 없습니다. 몇 가지를 시도하고 당신이 편안 무엇을 참조,다음 그것을 위해 이동! 그들은 처음에 어색 경우 걱정하지 마세요-당신은 더 당신이 그들을 사용 얻을 것이다. 가장 쉬운 것부터 가장 어려운 것까지 탐험을 시작할 수있는 몇 가지가 있습니다.
칸바 이것은 아마 시장에서 가장 쉬운 하나이며,그것은 무료입니다! 이 당신이 깊은 다이빙을 할 경우 작업에 대한 칸바라는 유료 버전이지만,무료 버전은 정말 재미 있고 쉽게 배울 수 있습니다. 그것은 웹 기반 디자인 도구,그래서 당신은 웹 사이트에 로그인하고 브라우저에서 바로 사용할 수 있습니다.
피몽키. 당신이 사진을 편집 및 필터와 함께 연주에 정말 있다면,피 몽키는 시도 가치가있다. 내장 된 많은 재미있는 효과가 있습니다. 칸바처럼,피 몽키는 웹 기반 및 무료 버전 플러스 추가 기능을 가진 유료 하나가 있습니다.
포토샵. 당신은 디자인 소프트웨어를 언급 할 수없고 포토샵을 가져올 수 없습니다! 이 프로그램의 강국 그냥 블로그 헤더를 만드는 것보다 더 많은 방법을 할 수 있지만,그것을 위해 확실히 좋아요. 그것은 당신이 다운로드 응용 프로그램,그리고 당신은(무료 평가판도 사용할 수 있습니다)매월 가입하여 지불 할 것이다.
전문 디자이너로서,나는 내 전체 경력을 위해 포토샵을 사용하고 나는 그것을 사랑 해요. 내 독자의 대부분은 포토샵이 처음에는 협박 생각,하지만 당신은 몇 가지 기초를 배우면 그것은 완전히 행할 수있어. 나는 칸바를 발견 이후,나는 종종 내 그래픽을 만들기 위해 포토샵과 칸바의 조합을 사용하지만,말해야한다. 칸바는 너무 재미 있습니다!
프로 팁:당신은 어도비에서 사진 계획을 선택하는 경우,당신은 꽤 낮은 월 비용으로 포토샵+라이트 룸을 얻을 수 있습니다. 너무 초라한.
워드스와그. 당신이 당신의 전화에 그래픽을 좋아하는 경우에,이것은 당신을위한 것입니다. 이 모바일 응용 프로그램은 무료로하지 않습니다,하지만 몇 달러이며,이오스와 안드로이드 버전이 있습니다. 을 더한,그것은 무료 크리에이티브 커먼즈 스톡 사진 사이트에 매여있어,그래서 당신은 당신의 블로그 헤더의 이미지 선택에 대한 손실에 결코. 선택할 수있는 모든 종류의 색상,질감 및 글꼴이 있습니다. 너가 한것을 필요로 하는 모두는”구름”에 너의 마지막 도표를 저장하나 너의 컴퓨터까지 구부린것을 이다 그래서 너는 너의 위치에 그것을 올려주기할 수 있는다.
이미지 크기
블로그 헤더를 만들 때 사이트 플랫폼과 관련하여 이미지 크기를 고려해야합니다. 워드 프레스 테마의 크기는 다음 사람의 사각형 페이지 또는 고 대디 고 센터 웹 사이트 빌더와 다를 수 있습니다. 명심해야 할 몇 가지 사항은
픽셀 치수입니다. 크기는 일반적으로 높이 및 픽셀 크기로 일부 숫자로 표시됩니다. 예를 들면:1000 1000 400(또는 1000 픽셀 400 픽셀)이미지 400 픽셀 높이 1000 픽셀을 의미합니다.
해상도. 인터넷을 위해,당신의 결의안은 쉽다-항상 72 이다! 300,600 또는 더 많은 것과 같은 더 높은 해상도는 인쇄용입니다. 모니터의 화면 해상도는 항상 72 입니다. 따라서 위의 예제 치수를 사용하면 최종 이미지가 폭 1000 픽셀,높이 400 픽셀,높이 72 인치 당 점(또는 피피)이됩니다.
파일 형식. 당신이 그들을 저장 얼마나 많은 시간에 상관없이 품질을 잃지 않을,하지만 메가 바이트(메가 바이트)크기가 더 크다. 그래서 파일 크기(메가바이트)작은 유지할 수 있습니다 하지만 당신이 그들을 저장할 때마다,그들은 품질의 조금을 잃게. A.두 번 저장 된 파일 좋아 보인다,하지만 당신은 그것을 5 또는 10 번 저장 한 후,그것은 픽셀 화 하 고 거친 보고 시작 됩니다.
최적화는 더 작은 파일 크기로 압축되도록 저장하지만 품질을 잃지 않도록 신중하게 저장하는 것을 의미합니다. 이 작업을 쉽게 수행 할 수 있습니다. 귀여운 팬더는 그들이 멋진 찾고 유지하지만 당신에게 메가 바이트를 절약 할 수있는 방법으로 이미지를 압축 시계!
칸바에서 블로그 헤더를 만드는 방법
-
계정에 가입.
-
맞춤 측정기준을 사용합니다.
-
무료 사진을 선택하십시오.
-
사용자 정의 텍스트를 추가합니다.
-
당신의 디자인을 개인화하십시오.
-
로고 추가.
-
블로그 헤더를 다운로드하십시오.
이제 재미있는 부분! 의 칸바를 사용하여 처음부터 사용자 정의 블로그 헤더를 만드는 파고 보자. 나는 무료로 사용할 수있는 자원을 사용하고,그래서 당신은 완전히 나와 함께 자신의 권리에이 작업을 수행 할 수 있습니다. 그냥 무료 계정에 가입하고 당신은 갈 준비가 된 것입니다.
우리가 만들 블로그 헤더는 다음과 같습니다:
1. 계정에 가입.
칸바에서 계정에 가입하면 오른쪽 상단에 있는 맞춤 측정기준 사용을 클릭할 디자인 만들기 페이지로 이동합니다.
사용자 정의 차원을 사용합니다.
나타나는 필드에 원하는 너비와 높이를 입력하고 픽셀에 대해”픽셀”을 선택합니다. 그 후,디자인을 클릭! 버튼.
빈 화면과 왼쪽에 레이아웃 탭이 선택된 새 프로젝트가 나타납니다. 프로젝트 이름이 지정되지 않았으므로 공유 버튼 옆의 맨 위에”1000 픽셀 400 픽셀—제목없는 디자인”이라는 이름을 붙였습니다.
무료 사진을 선택합니다.
요소를 클릭하고 제공된 사진 중에서 무료 사진을 선택하십시오. 모든 무료 사람은 하단 모서리에”무료”라고. 당신은 또한 당신의 자신의 사진을 업로드 할 수 있지만,우리의 튜토리얼을 위해 우리는 이러한 무료 사진 중 하나와 함께 작동합니다.
사진을 클릭하면 프로젝트의 디자인 영역에 즉시 나타납니다. 이제 가서 우리가 그것에있는 동안이 프로젝트의 이름을 변경 할 수 있습니다. 공유 버튼 옆에 있는 임시 이름을 클릭하고 새 이름을 입력합니다. 내 척 여행 블로그이”여행 일기”를 호출하고 있습니다.
이미지가 디자인 영역에 있으면 모서리의 원을 드래그하여 이미지를 더 크게 만들 수 있습니다. 가서 문서에 맞게이 이미지의 크기를 조정합니다.
사용자 정의 텍스트를 추가합니다.
좋아요! 이제 우리는 텍스트가 필요합니다. 왼쪽 열에서 텍스트 탭을 클릭,당신은 선택할 수있는 몇 가지 옵션을 볼 수 있습니다. 해당 창의 아래 부분에서 미리 디자인된 텍스트 배열을 클릭하거나 맨 위에 있는 개별 텍스트 줄을 클릭할 수 있습니다. 가서 제목 추가를 클릭합니다. 이 텍스트는 이미지에 나타나고 기본값은 검은 색으로 표시됩니다.
이제 재미있게! 다른 글꼴을 선택합시다. 글꼴 선택을 통해 찾아 당신의 공상을 치는 것을 선택합니다. 나는 브러시 스타일을 선택했다. 그것은 그 이미지의 상단에 검은 색으로 볼 어렵다,그래서 흰색으로 변경 할 수 있습니다. 색상 선택을 가지고 상단에있는 다채로운 상자를 클릭하고 흰색 사각형을 선택합니다. 또한 크기를 104 로 조정했습니다.
다음,가서 더 중심이되도록 이미지에 제자리에 그 제목을 드래그합니다.
디자인을 개인화하십시오.
이 바쁜 배경의 텍스트를 읽고 집중하는 것이 조금 어렵 기 때문에 흐림 효과를 추가 할 수 있습니다. 배경 사진을 클릭하여 선택한 다음 필터를 선택하고 고급 옵션을 클릭하십시오.
필터 창이 확장되어 다른 작업을 수행할 수 있습니다. 채도,색상 색조,비 네트 추가 등으로 재생할 수 있습니다.
블러 섹션에서 검은 점을 클릭하고 오른쪽으로 드래그합니다. 나는 흐림 규모에+22 를 선택했다.
로고를 추가합니다.
이제 그 창 밖으로 클릭하여 디자인을 봅니다. 좋은 찾고! 이제 로고를 추가하여 브랜드화 할 수 있습니다. 당신은 왼쪽에있는 업로드 탭을 클릭하여 로고를 업로드 한 다음 큰 녹색 자신의 이미지 버튼을 업로드 할 수 있습니다.
투명을 선택합니다.(귀하의 로고 스타일은 흰색 사각형 또는 그와 같은 내부에 있지 않는 한)그것은 단색에 평평하지 않도록 로고의 버전.
로드되면 녹색 버튼 아래 영역에 표시됩니다. 그것은 당신이 미래의 프로젝트에 사용할 수 있도록 거기에 머물러 있습니다. 편리한! 나는 이미 내 가짜 로고를 업로드했다,그래서 난 그냥 그것을 찾기 위해 아래로 스크롤.
로고를 클릭 한 다음 디자인에 나타납니다.
지금 당신은,크기를 조정 주위를 이동하고,심지어 공상 얻을 당신이 원하는 경우 투명성을 재생할 수 있습니다.
블로그 헤더를 다운로드하십시오.
야호! 이제 디자인이 준비되었으므로 남은 것은 모두 다운로드하는 것입니다. 화면 상단의 다운로드 버튼을 클릭하고 파일 형식을 선택합니다. 나는 보통 추천 된 피칭 타입으로 간다.
디자인을 컴퓨터에 다운로드하면 디자인을 열고 감탄한 다음 블로그에로드 할 수 있습니다.
그리고 그게 전부입니다! 바라건대 당신은 블로그 헤더와 별의 이미지의 중요성을 만드는 방법에 대한 좋은 그립을 가지고있다. 지금,당신은 당신의 블로그에 하나를 추가하는 방법에 대한 갈 수 있습니다. 행복한 브랜딩!