The Right Image Size for Your Website: 10-Minute Monday

Wideo poniżej pokazuje, jak znaleźć odpowiedni rozmiar obrazu dla każdego projektu strony internetowej

Co? No images?

Jeśli jesteś jak większość ludzi, kiedy pobrałeś swój pierwszy motyw WordPressa zastanawiałeś się co się stało z obrazkami – tymi samymi obrazkami, które sprawiły, że chciałeś kupić ten motyw.

Po tym jak przebrnąłeś przez swoje pierwsze wielkie rozczarowanie, że Twój motyw NIE zawierał obrazków, następnym pytaniem, które prawdopodobnie sobie zadałeś było: 'Jak do cholery sprawić, aby mój motyw WordPress wyglądał jak demo?'

Jeśli zaczniesz od dowiedzenia się, jaki rozmiar obrazu użył demo Twojego motywu, wkrótce będziesz miał stronę, która jest lepsza niż demo, ponieważ będzie miała obrazy, które najlepiej reprezentują Ciebie i Twój biznes.

Właściwy rozmiar obrazu

Gdy buduję stronę WordPress dla moich klientów, zazwyczaj potrzebuję 4 obrazów o różnych rozmiarach:

  1. strona główna / obraz nagłówka strony frontowej (a.k.a. obraz bohatera)
  2. banery nagłówka strony,
  3. obrazy postów blogowych, i
  4. obrazy paska bocznego.

Jak znaleźć właściwy rozmiar

Informacja MEDIA SETTINGS pod APPEARANCE jest świetnym miejscem, aby zacząć, ponieważ poda Ci…

  • najlepszą szerokość obrazu dla wpisu na blogu (1024 jest dla motywu Showcase Pro), i
  • jaki rozmiar obrazu będzie najlepszy dla paska bocznego twojego motywu (300)

…ALE nie da ci wymiarów dla strony głównej / obrazu nagłówka strony głównej lub banerów nagłówka strony.

Znajdziesz rozmiar dla strony głównej / strony frontowej. Rozmiar obrazu nagłówka w sekcji APPEARANCE -> CUSTOMIZE -> FRONT PAGE HEADER IMAGE.

W tym przykładzie, rozmiar to 1600 px X 1050 px.

Banery nagłówkowe strony

Znalezienie tego rozmiaru jest trochę bardziej skomplikowane.

Na przykład, baner nagłówkowy demonstracyjnej strony TEAM Showcase Pro jest dużo cieńszy niż obrazek nagłówkowy HOME / Front Page, ALE dokumentacja motywu nie mówi mi, jaki rozmiar ma mieć baner nagłówkowy strony TEAM.

Aby znaleźć dowolny rozmiar banera strony

Wprowadź URL demo twojego motywu do przeglądarki Firefox. Użyj Firebug, aby uzyskać dokładne wymiary obrazu, który został użyty.

  1. Prawy + Kliknij / Control + Kliknij (Mac) na stronie internetowej
  2. Wybierz Wyświetl informacje o stronie
  3. Wybierz Media
  4. Przewiń w dół do Tła
  5. Wybierz obraz, który jest taki sam jak baner nagłówka
  6. Wymiary: daje ci dokładny rozmiar obrazu używany w demo motywu

Rozmiar banera nagłówka TEAM jest dokładnym wymiarem jak baner nagłówka strony HOME (1600 px X 1050 px), nawet jeśli wyświetla się cieńszy.

Zobacz film poniżej, aby zobaczyć jak używam Firefoxa do znalezienia odpowiedniego rozmiaru obrazu.

Co?!!! Not Every Header Banner Image Is The Same Size

Kiedy sprawdziłem baner nagłówkowy BLOGa, byłem zaskoczony, że nie jest on tej samej wielkości co baner nagłówkowy TEAM. Zamiast 1600 x 1050, miał 1800 px X 960px.

Banery nagłówkowe tego motywu będą zmieniać rozmiar, aby zachować spójny wygląd na całej stronie.

Twoim wyzwaniem projektowym będzie znalezienie obrazów, które będą dobrze wyglądać w długich i wąskich przestrzeniach.

Właściwy” rozmiar obrazka wpisu na blogu

Użyjesz tych samych kroków, aby znaleźć demonstracyjny rozmiar obrazka wpisu na blogu Twojego motywu:

  • Right + Click / Control + Click (Mac) na stronie internetowej
  • Choose View Page Info
  • Choose Media
  • Scroll down to Background
  • Wybierz obraz, który jest taki sam jak baner nagłówka
  • Dimensions: daje ci dokładny rozmiar obrazu używany w demo motywu
900 px X 600 px

Ostatnia wskazówka

Obrazy na stronę internetową powinny mieć 72 dpi i RGB.

Obrazy do druku powinny mieć 300 dpi i CMYK.

Zobacz jak używam Firefoxa do znalezienia odpowiedniego rozmiaru obrazu w demo tematu

Potrzebujesz pomocy z obrazami?

Dołącz do mnie w 10-minutowym poniedziałku, gdzie dzielę się wskazówkami i sztuczkami dla nie-projektantów, którzy chcą poprawić swój profesjonalny wizerunek.

Możesz również zadzwonić lub wysłać do mnie e-mail, w każdej chwili. Kontakt

Dołącz do mnie na żywo w mój następny 10-minutowy poniedziałek

Zdobądź zaproszenie do przyłączenia się do mnie na żywo w mój następny 10-minutowy poniedziałek, i otrzymaj listę moich ulubionych darmowych zasobów dla wspaniałych fotografii, które możesz wykorzystać na swojej stronie internetowej lub w dowolnym projekcie.

To jest LIVE i tylko 10 minut. Sesje są krótkie i skupiają się na jednym temacie.

A ponieważ jest to LIVE, możesz zadawać pytania. Staram się również, aby sesje były krótkie, ponieważ wiem, że jesteś zajęty i nie masz czasu do stracenia.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *