istnieją trzy rodzaje nagłówków, które zwykle widzę używane na starych interwebs — nagłówki nawigacyjne, pełne nagłówki zdjęć i mile widziane nagłówki mat. Jeśli interesuje cię, jak stworzyć nagłówek bloga, musisz znać zalety i wady każdego typu, zanim przejdziemy do sedna tworzenia.

nagłówki nawigacyjne

nagłówki nawigacyjne nie są oparte na zdjęciach. Na przykład na samej górze mojej strony internetowej mam swoje logo, a także linki do ważnych stron lub formularzy rejestracyjnych. Spójrz.

nagłówki nawigacyjne, takie jak te, są idealne, jeśli jesteś fanem minimalizmu i chcesz, aby ludzie naprawdę skupili się na pisaniu, nie rozpraszając się obrazami.

jest to również świetna trasa, jeśli jesteś nowy, nie wymyśliłeś swojego brandingu lub po prostu musisz zacząć działać online.

układ nie jest ustawiony w kamieniu — nagłówki nawigacyjne można układać na różne sposoby. Prawdopodobnie widziałeś, gdzie logo znajduje się w środku nad linkami tekstowymi, lub może po prostu mieć logo bez linków (lub odwrotnie).

ten nagłówek często żyje w harmonii z dodatkowymi nagłówkami blogów (moja strona ma również inny nagłówek pod nim), jak pełne nagłówki zdjęć i mile widziane maty.

nagłówki Zdjęć

styl nagłówka zdjęcia jest bardzo przyciągający wzrok i naprawdę przyciąga uwagę. Jeśli chcesz mieć nagłówek zdjęcia na swoim blogu, zastanów się, jaki będzie temat. Czy będzie to zdjęcie osoby? Jak ty, Czy ty i twoja rodzina, czy jakaś reprezentacja Twojego idealnego klienta? A może będzie to zdjęcie przedstawiające jakiś krajobraz, wzór, kreskówkę/ikony, a nawet wideo?

sprawdź ten przykład z AlexTooby.com.Alex wykorzystuje swoje zdjęcie oraz pomysł maty powitalnej z silnym wezwaniem do działania, aby zapisać się na kurs.

zdjęcie działa, zarówno dla nowych, jak i powracających odwiedzających. Dlaczego? Ponieważ używa kilku subtelnych elementów wizualnych (więcej o nich później), które służą wzmocnieniu siły tego nagłówka. Trzyma telefon na wyciągnięcie, z wyśmiewanym interfejsem na Instagramie i patrzy w stronę tekstu, który chce, abyś przeczytał. Twoje oko jest naturalnie przyciągane do jej twarzy, a następnie do słów, a następnie w dół do jasnoróżowego przycisku do klikania. To byłoby mniej skuteczne, gdyby patrzyła na lewą stronę ekranu.

Pro-Tip: Posiadanie kogoś zwróconego ” w ” stronę kopii lub przycisku to sztuczka ninja, której możesz również użyć.

nagłówki Zdjęć mogą ustawić nastrój i pomóc czytelnikom podjąć działania. Ponieważ nagłówki zdjęć są duże, blokują inne zakłócenia na stronie i pomagają skupić czytelników na tym, co dokładnie chcesz, aby zrobili (jak przycisk „Rozpocznij bezpłatny kurs” Alexa).

Welcome mat headers

typowa „welcome mat”, którą można zobaczyć w Internecie, jest pełnoekranowym przejęciem i istnieją narzędzia, które pomogą Ci to zrobić.

lub, jeśli nie chcesz przejmować całej strony, możesz również skonfigurować część, aby zachowywała się jak Mata powitalna lub formularz rejestracyjny, aby uzyskać specjalne gratisy, które oferujesz. Nie wiesz jak by to wyglądało? Zobacz poniższy obrazek z mojej strony. Oferuję bezpłatny E-kurs, który chcę, aby wszyscy odwiedzający zobaczyli jako pierwsi, więc mogę zbudować moją listę e-mailową z odpowiednimi odbiorcami dla przyszłych e-maili i promocji. Moje wpisy na blogu pojawiają się poniżej, więc odwiedzający mogą po prostu przewijać w dół, aby zobaczyć moje najnowsze posty.

teraz, gdy widziałeś trzy różne style, nadszedł czas, aby porozmawiać o tworzeniu nagłówka bloga dla Twojej witryny.

jak zrobić nagłówek bloga, który wygląda na markowy

wiem, że termin „markowy” brzmi oficjalnie i zastrasza, ale nigdy się nie bój! To całkiem proste, jeśli skupisz się na kilku kluczowych rzeczach. Mianowicie kolory (często występujące w Twoim logo) i czcionki.

Pro tip: Umieść przewodnik po marce dla siebie w folderze, dzięki czemu możesz śledzić te informacje (wraz z logo), aby uzyskać łatwy dostęp w dowolnym momencie.

nawet jeśli nie zrobisz jakiegoś wymyślnego drukowanego przewodnika, możesz zapisać te informacje na karteczce i zachować je na monitorze. Pozwoli to zaoszczędzić mnóstwo czasu na dłuższą metę! Teraz omówmy kilka elementów projektu.

Wybierz kolory

możesz mieć kilka kolorów, które wybrałeś do użycia dla swojej marki, ale dobrym miejscem na początek jest logo. Twoje kolory logo są świetne do wykorzystania w całej witrynie, brandingu i nagłówku bloga. Spójność jest kluczowa-jeśli masz gorący róż, to może Twoje zdjęcia mają jeden element różu do nich lub ogólny różowy odlew, a może używasz czerni i bieli i ciągniesz kolor w inny sposób.

Aby z YouBabyMeMummy.com robi to pięknie, wstawiając wspaniałą, pełnokolorową wersję na jej logo jako nakładkę na czarno-białe zdjęcie siebie z córką. Ten nagłówek zdjęć naprawdę wciąga cię w jej historię w odważny i wciągający sposób. Kliknij wokół jej strony, jeśli chcesz zobaczyć więcej przykładów oszałamiających, pełnoekranowych obrazów.

a jeśli nadal próbujesz dowiedzieć się, jakie kolory użyć w swojej marce, ten artykuł o psychologii koloru jest bardzo odkrywczy!

Wybierz czcionkę

umieszczenie stylowej lub Markowej czcionki bezpośrednio w nagłówku może być naprawdę trafnym i szybkim sposobem przekazania wiadomości. Jak w tym wyjątkowym i przyciągającym wzrok obrazie Luci na ByLucinda.co.uk.

ten Pejzaż morski pasuje do jej marki, która zawiera wiele naturalnych elementów i prezentuje jej elegancki, ale szykowny klimat. Nie ma Times New Roman dla tej pani! Ma również sprytny sposób pokazywania swoich linków do mediów społecznościowych po prawej stronie w jasnozielonym prostokątnym pasku. Łączy górną nawigację z dużym pogrubionym zdjęciem i pomaga w celowy sposób przyciągnąć wzrok w dół strony.

możesz znaleźć naprawdę zabawne, darmowe czcionki online z takich miejsc jak Font Squirrel i Dafont. Wiele z tych darmowych czcionek jest wbudowanych w programy takie jak Canva i PicMonkey. Ponieważ jednak są one bezpłatne, istnieje większa szansa, że ktoś inny (nawet konkurent) może używać tego, którego chcesz.

jeśli chcesz używać bardziej wyszukanych czcionek w treści lub nagłówkach swojej witryny (tj. Nie w obrazie), powinieneś poświęcić trochę czasu na poznanie Google Fonts. Aby uzyskać wskazówki, jakich czcionek używać do projektowania stron internetowych, sprawdź te trzy przykazania.

Włącz elementy wizualne

komponując nagłówek swojego markowego bloga, powinieneś pomyśleć o tym, jakie elementy wizualne chcesz uwzględnić. Przejrzeliśmy przykłady użycia logo, Zdjęcia i dużego przezroczystego przycisku.

Jen z ToastMeetsJam.com właśnie tak. Nie wpadła po prostu do tabeli, jak w nudnym arkuszu kalkulacyjnym-użyła artystycznego obramowania i świetnych czcionek wraz z polami formularzy i okrągłym przyciskiem „GO”.

zobacz, jak bezproblemowo włącza swoją rejestrację e-mail do projektu? Nie tylko angażuje cię swoim zdjęciem wyglądającym na animowaną i przyjazną, ale także wykorzystuje czyste, szare tło, aby skupić się na tekście i formie. Żadnych rozpraszających wzorów lub obrazów, które odciągną cię od kluczowego zadania wypełniania tego formularza i poruszania się do przodu. Nie mogło być bardziej jasne, co musisz zrobić, aby uzyskać jej darmowy, pięciodniowy kurs.

przygotuj się do projektowania

widziałeś kilka przykładów świetnych nagłówków blogów, ale co robisz dalej? Aby rozpocząć pracę nad własnym nagłówkiem bloga, musisz zebrać kilka narzędzi do projektowania i informacje o rozmiarze obrazu.

narzędzia projektowe

niezbędne narzędzia projektowe do tworzenia własnego niestandardowego nagłówka bloga nie muszą być trudne w użyciu ani drogie. Wypróbuj kilka i zobacz, co Ci odpowiada, a następnie idź do niego! Nie martw się, jeśli na początku czują się niezręcznie — im częściej ich używasz,tym lepiej. Oto kilka, które możesz zacząć odkrywać, w kolejności od najłatwiejszej do najtrudniejszej.

Canva. Jest to prawdopodobnie najprostszy na rynku, i to za darmo! Istnieje płatna wersja o nazwie Canva do pracy, jeśli chcesz nurkować głębiej, ale darmowa wersja jest naprawdę zabawna i łatwa do nauczenia. Jest to internetowe narzędzie do projektowania, więc po prostu logujesz się na stronie i korzystasz z niej bezpośrednio w przeglądarce.

PicMonkey. Jeśli naprawdę lubisz edytować zdjęcia i bawić się filtrami, warto spróbować PicMonkey. Wbudowanych jest wiele zabawnych efektów. Podobnie jak Canva, PicMonkey jest oparty na internecie i ma darmową wersję plus płatną z dodatkową funkcjonalnością.

Photoshop. Nie można wspomnieć o oprogramowaniu do projektowania i nie przywołać Photoshopa! To potęga programu i może zrobić o wiele więcej niż tylko zrobić nagłówek bloga, ale zdecydowanie jest do tego świetny. Jest to aplikacja, którą POBiERASZ i płacisz miesięczną subskrypcją (dostępna jest również bezpłatna wersja próbna).

jako profesjonalny projektant używam Photoshopa przez całą swoją karierę i uwielbiam go. Większość moich czytelników uważa, że Photoshop jest zastraszający na początku, ale jest to całkowicie wykonalne, gdy nauczysz się kilku podstaw. Muszę jednak powiedzieć, że od czasu odkrycia Canva często używam kombinacji Photoshopa i Canva do tworzenia grafiki. Canva jest taka zabawna!

Pro wskazówka: jeśli wybierzesz plan fotografii z Adobe, możesz uzyskać Photoshop + Lightroom za dość niski miesięczny koszt. Nie za bardzo.

Jeśli lubisz tworzyć grafiki w telefonie, to jest to dla ciebie. Ta aplikacja mobilna nie jest darmowa, ale kosztuje tylko kilka dolarów i ma wersję na iOS i Androida. Dodatkowo jest podłączony do bezpłatnej strony ze zdjęciami stockowymi creative commons, więc nigdy nie tracisz wyboru obrazu w nagłówku bloga. Ma różne kolory, tekstury i czcionki do wyboru. Wszystko, co musisz zrobić, to zapisać ostateczną grafikę w „chmurze” lub podłączyć ją do komputera, aby móc przesłać ją na swoją stronę.

rozmiary obrazów

podczas tworzenia nagłówka bloga należy wziąć pod uwagę rozmiar obrazu w odniesieniu do platformy witryny. Rozmiar Twojego motywu WordPress może różnić się od strony Squarespace następnej osoby lub GoDaddy Gocentral Website Builder. Oto kilka rzeczy, o których należy pamiętać:

wymiary pikseli. Rozmiary są zwykle wymienione jako pewna liczba szeroka przez pewną liczbę wysoką i wymiary w pikselach. Na przykład: 1000×400 (lub 1000px x 400px) oznacza, że obraz ma 1000 pikseli szerokości na 400 pikseli wysokości.

rozdzielczość. W przypadku Internetu twoja rozdzielczość jest łatwa-zawsze wynosi 72! Wyższe rozdzielczości, takie jak 300, 600 lub więcej, są do drukowania. Rozdzielczość ekranu dla monitorów to zawsze tylko 72. Tak więc korzystając z naszych przykładowych wymiarów z góry, twój ostateczny obraz będzie miał szerokość 1000px na 400px, 72 dpi (lub ppi).

Typ pliku. Pliki PNG nigdy nie tracą jakości, niezależnie od tego, ile razy je zapisujesz, ale są większe w MB (megabajtach). Pliki JPG (jpeg) można zapisywać na różnych poziomach jakości, dzięki czemu można zachować Rozmiar pliku (MB) mały, ale za każdym razem, gdy je zapisujesz, tracą trochę jakości. A.plik jpg zapisany dwa razy wygląda dobrze, ale po zapisaniu go pięć lub 10 razy zacznie wyglądać pikselowo i ziarnisto.

Optymalizacja oznacza zapisywanie ich tak, aby były bardziej kompaktowe przy mniejszym rozmiarze pliku, ale ostrożnie, aby nie stracić jakości. Możesz to zrobić łatwo, korzystając z darmowej strony internetowej o nazwie TinyPNG. Oglądaj cute panda kompresować swoje zdjęcia w sposób, który utrzymuje je wyglądają wspaniałe, ale oszczędza megabajty!

jak zrobić nagłówek bloga w Canva

1. Załóż konto.

2. Użyj niestandardowych wymiarów.

3. Wybierz darmowe zdjęcie.

4. Dodaj własny tekst.

5. Spersonalizuj swój projekt.

6. Dodaj logo.

7. Pobierz nagłówek bloga.

a teraz zabawa! Zagłębimy się w tworzenie niestandardowego nagłówka bloga od podstaw za pomocą Canva. Korzystam z zasobów, które są dostępne za darmo, więc możesz to całkowicie zrobić sam ze mną. Wystarczy, że założysz darmowe konto i będziesz gotowy do pracy.

oto nagłówek bloga, który będziemy tworzyć:

1. Załóż konto.

po zarejestrowaniu konta w Canva przejdziesz do strony Utwórz projekt, na której będziesz chciał kliknąć Użyj niestandardowych wymiarów w prawym górnym rogu.

Użyj niestandardowych wymiarów.

wypełnij żądaną szerokość i wysokość w polach, które się pojawią, i wybierz ” px ” dla Pikseli. Następnie kliknij Projekt! guzik.

pojawia się świeży projekt z pustym ekranem i zakładką Układy zaznaczoną po lewej stronie. Zauważ, że nazwa projektu nie została określona, więc nazywa się „1000px x 400px — Untitled Design” w górnej części obok przycisku Udostępnij.

Wybierz darmowe zdjęcie.

kliknij na elementy i wybierz darmowe zdjęcie spośród podanych. Wszyscy wolni mówią „wolni” w dolnym rogu. Możesz również przesłać własne zdjęcie, ale w naszym samouczku będziemy pracować z jednym z tych bezpłatnych zdjęć.

po kliknięciu zdjęcia, natychmiast pojawia się w obszarze projektowania projektu. Zmieńmy nazwę tego projektu. Kliknij tymczasową nazwę obok przycisku Udostępnij i wpisz nową. Nazywam to „pamiętnikami z podróży” na moim udawanym blogu podróżniczym.

gdy obraz znajduje się w obszarze projektowania, możesz go powiększyć, przeciągając kółka w rogach. Śmiało i zmień rozmiar tego obrazu, aby pasował do dokumentu.

Dodaj niestandardowy tekst.

Super! Teraz potrzebujemy SMS-a. Kliknij kartę Tekst w lewej kolumnie, a zobaczysz kilka opcji do wyboru. Gotowe aranżacje tekstu można kliknąć w dolnej części tego okna lub w poszczególnych wierszach tekstu u góry. Śmiało i kliknij Dodaj nagłówek. Ten tekst pojawia się na obrazku, domyślnie jest czarny.

teraz dla Zabawy! Wybierzmy inną czcionkę. Przejrzyj opcje czcionek i wybierz wszystko, co ci się podoba. Wybrałem pędzel. Trudno zobaczyć na czarno na tym obrazie, więc zmieńmy go na biały. Kliknij Kolorowe pole u góry, aby wyświetlić opcje kolorów i wybierz biały kwadrat. Dopasowałem też Rozmiar do 104.

następnie przeciągnij ten nagłówek na miejsce na obrazie, aby był bardziej wyśrodkowany.

Spersonalizuj swój projekt.

trochę ciężko jest czytać i skupić się na tekście na tym zajętym tle, więc dodajmy efekt rozmycia. Po prostu kliknij zdjęcie tła, aby je wybrać, a następnie wybierz filtr i kliknij Opcje zaawansowane.

okno filtra rozszerza się, aby pokazać ci inne rzeczy, które możesz zrobić. Możesz bawić się nasyceniem, barwieniem kolorów, dodawać winietę i nie tylko.

kliknij czarną kropkę w sekcji rozmycie i przeciągnij ją w prawo. Wybrałem +22 w skali rozmycia.

Dodaj logo.

teraz kliknij z tego okna, aby zobaczyć swój projekt. Dobrze wyglądasz! Teraz oznaczmy go dodając logo. Możesz przesłać swoje logo, klikając kartę przesyłania po lewej stronie,a następnie duży zielony przycisk Prześlij własne obrazy.

Wybierz przezroczysty .wersja png Twojego logo, aby nie było spłaszczone na jednolitym kolorze (chyba że Twój styl logo znajduje się wewnątrz białego prostokąta lub czegoś w tym rodzaju).

po załadowaniu zobaczysz go w obszarze poniżej zielonego przycisku. Pozostaje tam do wykorzystania w przyszłych projektach. Handy! Wysłałem już moje fałszywe logo, więc przewijałem w dół, aby je znaleźć.

kliknij logo, a następnie pojawi się w Twoim projekcie.

teraz możesz go zmienić, przenieść, a nawet uzyskać fantazję i bawić się przezroczystością, jeśli chcesz.

Pobierz nagłówek bloga.

Yay! Teraz twój projekt jest gotowy, więc pozostało tylko go pobrać. Kliknij przycisk Pobierz u góry ekranu i wybierz typ pliku. Zwykle wybieram zalecany typ PNG.

po pobraniu projektu na komputer Możesz go otworzyć i podziwiać, a następnie załadować na bloga.

i to wszystko! Mam nadzieję, że dobrze wiesz, jak zrobić nagłówek bloga i znaczenie gwiezdnego obrazu. Teraz możesz dodać go do swojego bloga. Happy branding!