O szablonach, ich projektowaniu i moich z tym zmaganiach...
niedziela, 30 sierpnia 2009

Po zrobieniu w zeszłym roku szablonów z cudzym topem naszła mnie ochota na podobną serię inspirowaną neonami. Choć znalazłam kilka ciekawych neonów, zarówno pod względem wyglądu jak i samej nazwy to jednak zadanie było znacznie trudniejsze do wykonania a szablony nie miały takiego charakteru jak bym oczekiwała. Kilka z nich było już niemal na ukończeniu ale mi nie odpowiadały więc przy okazji porządków na koncie szablonykatemac skasowałam całą serię a ten jeden szablon, który mi się podobał przeniosłam pod inny adres, jest to teraz 60 szablon Blondies.

szablon blondies
60 szablon Blondies

Uwagi o szablonie:

  • to ciemny i raczej jaskrawy szablon; wąską szpaltę zostawiłam w spokoju, poza wybraniem kroju, wielkości i koloru w niewielkim stopniu ingerowałam w jej wygląd; podobnie jest z większością elementów w szerokiej... z większością ale nie z wszystkimi; szczególny wygląd przypisałam elementom informacyjnym pod notką, większość z nich ustawiłam w jednym wierszu, rozdzieliłam pionową ramką i dałam różne kolory, wielkości, stopień pogrubienia; jeżeli tego byłoby jeszcze komuś mało to na deser jest ozdobnik - daleko temu IPT do minimalizmu... to raczej barokowe IPT
  • z kolorów jestem zadowolona i ciekawi mnie jak wy będziecie je odbierali;
    • tekst całości jest żółtawo-kremowy; tło jest bardzo ciemne, czarne, nie chciałam dawać bardzo jasnej, białej czcionki - kontrast byłby zbyt duży;
    • dla linków wybrałam bardzo intensywny, ciemny niebieski, bardzo podobny do tego który większość przeglądarek ma ustawione jako domyślny ale jednak w porównaniu do niego nieco jaśniejszy i mniej jaskrawy; ja widzę ten kolor bardzo wyraźnie na czarnym tle; zastanawiam się jednak co z tymi którzy mają nieco inaczej ustawioną jasność ekranu, czy nie jest dla was za ciemny?
  • lista opisanych skryptów jest dość tradycyjna: zwijane archiwum, zwijane archiwum, ostatnie komentarze, zwijane zakładki,
  • opisałam też dwie blogfrogowe wklejki więc mogą być dodawane w wersji developerskiej: Bloczek - wpisy z blogów, bloczek - nowe blogi,
  • wygląd tagów delicious na blogu też nieco zmieniłam ale pamiętajcie o wybraniu właściwych kolorów i wielkości (wszystkie szczegółwe informacje o szablonie można zawsze znaleźć na blogu z szablonem w kategorii DODATKI i informacje o szablonie)
  • Opisane są zmiany SEO, strona statyczna a także udawana stopka pod identyfikatorem uStopka (w ten właśnie sposób umieściłam tam informacje o szablonie).

czwartek, 27 sierpnia 2009

Witam powakacyjnie i pourlopwo... Wakacje offline, offkomputer, offcodzienność to coś co polecałabym każdemu. Ten wpis przygotowałam wcześniej i planowałam opublikowć w trakcie wakacji ale off było zbyt kuszące...

Niektóre szablony bardzo łatwo przerobić na coś innego. Te które powstały na bazie blokowego 39 należą do tej właśnie grupy a do tego zmiana jest bardzo łatwa. Robiąc serię blokową po kolei opisywałam jak pewne rzeczy ustawiać, zmieniać i zastępować. Dzisiaj troszkę podsumuję całą serię i pokażę konkretną zmianę, która już zresztą była wspominana w jednym z wpisów. Podam przepis jak łatwo i szybko zmienić piaskowy letni szablon na ciepły, wypieczony, kulinarny projekt.

Kate przedstawia kulinarny bloxSkładniki:
- 1 szablon blokowy kremowy
- 1 zdjęcie kulinarne (860x300px)
- Color Palette Generator do odnalezienia kolorów
- edytor tekstowy do szybkiego zastąpienia kolorów

Sposób przyrządzenia:

1. krok pierwszy: szablon

Wybrany szablon i ładujemy na nasz blog. W tym przypadku będzie to szablon 47 blokowy kremowy. Jeżeli korzystaliście wcześniej z szablonu na bazie html Spokojnego to nie ma problemu w innym wypadku aby zobaczyć CSS naszego nowego szablonu trzeba się wylogować i ponownie zalogować do edycji bloga (można też to robić trochę w druga stronę czyli najpierw zmienic szablon bazowy na Spokojny, nastepnie skopiować nowy, wybrany przez nasz szablon - kremowy i wszystko będzie ok). Po ponownym zalogowaniu gdy wejdziemy do edycji wyglądu zobaczymy od razu css 47 szablonu blokowego kremowego.

2. krok drugi: zdjęcie

Zapewne większość osób prowadzących kulinarne blogi ma cała masę fajnych, apetycznych zdjęć (przy okazji jeżeli ktoś chciałby się podzielić jakimiś smaczymi ujęciami jedzonka to będę wdzięczna - baaardzo przydadzą mi sie do szablonów kulinarnych). Ja taką bazą nie dysponuję tak więc dzisiajszy cel osiągnę korzystając ze zdjęć Yummy solar-baked bread by Abri_Beluga (cc-by) i Shallots by daisybush (cc-by). Wasze oryginalne autorskie zdjęcia będą jednak dużo lepsze.

Yummy solar-baked bread by Abri_Beluga Shallots by daisybush

Gdy mamy wybrane zdjęcie musimy je przyciąć do odpowiedzniej wielkośći. Powinno mieć wymiary 860x300px. Jeżeli będzie większe to oczywiście nic się nie stanie, po prostu jego część nie będzie widoczna. Nie powinno być mniejsze. Większość programów graficznych nie ma problemu z przycinaniem zdjęć. Pamiętajcie tylko o względnej optymailizacji wielkości. Do zasobów bloksa można załadować pliki wielkości 250KB ale im mniejszy on będzie tym szybciej bedzie sie ładował.
Ładujemy więc nasze nowe tytułowe zdjęcie do zasobów bloga.

Wymienić zdjęcie nie jest trudno. Po pierwsze potrzebujemy adresu zdjęcia w zasobach. W moim przypadku jest on taki:
Yummy solar-baked bread - http://47szablonkatemac.blox.pl/resource/47_top1.jpg
Shallots - http://47szablonkatemac.blox.pl/resource/47_top2.jpg

Następnie odszukujemy miejsce w CSS gdzie opisane jest zdjęcie tytułowe jako tło. W zdecydowanej większości przypadków będzie to #BlogTytulBox

#BlogTytulBox {
WIDTH: 860px;
MARGIN: 0px 20px;
PADDING: 210px 0px 10px 0px;
TEXT-ALIGN: left;
background: url(/resource/47_top.jpg) no-repeat top left;
}

Zastępujemy adres wywołania zdjęcia. Możemy podać cały począwszy od http albo w wersji skróconej podając tylko odwołanie do zasobów (resource) i nazwę pliku (wraz z rozszerzeniem).

3. Krok trzeci: kolory

Nie zamierzam zmieniać wszystkich kolorów. W przypadku szablonu, który ma tak wiele kolorów w tle wymiana wszystkich byłaby sporym problemem - wiem coś o tym, zmieniałam i doposywałam kolory dla sześciu szablonów i kilka z nich robiłam po trzy-cztery razy. Wymienię tylko kolory wyróżniające się czyli w tym przypadku pmarańczowy (#ddaa66 i #ff9900). To całkiem sensowny kolor i będzie pasował do większości zdjęć ponieważ bardzo dobrze pasuje do szablonu. No ale skoro sie już bawimy to bawmy sie na całego - zmienmy i pomarańczowy.

Color Palette Generator podpowiada nam kilka kolorów, Tak się złozyło, że w przypadku obu zdjęć są dość podobne - wrzosowe. Najlepiej wybrać dwa najbardziej wyróżniające się. Ja wybrałam takie lekko różowe: #aa5555 i #ddaa99.

Teraz uruchamiam edytor tekstowy, niech dzisiaj to będzie program z pakietu Open Office. Korzystając z funkcji znajdz i zastąp (Ctrl+F) zastępuję kolor pomarańczowy wrzosowym. Mam teraz gotowy całkiem sensowny CSS z wymienioną grafiką i zmienionymi dwoma kolorami.

Yummy solar-baked bread - zobacz css: 47 1 kremowy
Shallots - zobacz css: 47 2 kremowy

Całkiem smacznie...

zmieniamy szablon blokowy w kulinarny zmieniamy szablon blokowy w kulinarny
pobierz zip z pilkami i instrukcją» | pobierz zip z pilkami i instrukcją»

Teoretycznie można pozmieniać jeszcze więcej rzeczy ale blokowy jest raczej prostym nieco geometrycznym szablonem więc najlepiej pasują do niego czcionki bezszeryfowe, proste i bez żadnych ozdób. Jeżeli dla kogoś Verdana jest za mało delikatna to proponuję ją zastąpić Arialem albo Trebuchet MS ale wtedy przyda się nieco zwiększyć stopień pisma - Verdana jest super-czytelnym krojem o wyraźnych literach sporych oczkach itd. aby inny font zachował tą samą czytelność najlepiej nieco zwiększyć stopień pisma.

BODY {
MARGIN: 0px;
COLOR: #261D13;
FONT-SIZE: 13px;
FONT-FAMILY: 'Trebuchet MS', Arial, sans-serif;
BACKGROUND: #BFAC99;
TEXT-ALIGN: center;
}

poniedziałek, 10 sierpnia 2009

Urodzinowy weekend troszkę namieszał w moich planach publikowania na zmianę ale szybko wracam do formy i po kulinarnym przetworzonym szablonie pora na coś bardziej oszczędnego i w moim guście. A następnym razem co? Hmm... Prawdopodobnie Retro-cola bo Blondies nie są jeszcze do końca przygotowane.

Simple story to nietypowo lewostronna seria. Oszczędna w kolorystyce ale za to bardzo zdecydowana. Nieco inaczej zarządzam w tym projekcie przestrzenią, wyraźnie wyróżniam tytuł bloga - architektura informacji wymaga aby hierarchia ważności tekstu była czytelna dla użytkownika, mam więc nadzieję, że dla wszystkich jest najzupełniej jasne co jest tytułem bloga i tam właśnie wasz wzrok podąża w pierwszej kolejności. Nieco poniżej poziomu wzroku znajduje się tytuł pierwszej notki. Dzięki sporej ilości światła i intensywnemu choć nie jaskrawemu kolorowi w tle tytuł notki jest kolejnym elementem, który zwraca uwagę. Mam nadzieję, że nie przytłacza bo to byłoby przegięcie - celem jest takie zrównoważenie proporcji pomiędzy wyróżnieniem a dopasowaniem do całości, które zapewni prawidłową komunikację nie wywołując negatywnych odczuć. W tytułach notek zdecydowałam się na negatyw przede wszystkim dlatego, że dzięki intensywnemu tłu wyraźnie widoczna jest granica pomiędzy poszczególnymi notkami (co jest bardzo dużym problemem w przypadku bardzo popularnego szablonu Spokojnego - przeglądając na szybko notki w takim szablonie trudno wychwycić gdzie kolejne notki się zaczynają). To chyba tyle jeśli chodzi o design study tego szablonu. Mam nadzieję, że przyda wam się tych kilka informacji o tym dlaczego coś wygląda tak a nie inaczej.

fioletowo-malinowy szablon na bloga
59 simply: fioletowo-malinowy

zielono-musztardowy szablon na bloga
58 simply: zielono-musztardowy

granatowo-żółty szablon na bloga
57 simply: granatowo-żółty

Uwagi:

  • kolory:
    • pomarańczowo-granatowy jest spokojny i anonimowy (przyznam, że połączenie niebieskiego i pomarańczowego to coś co mnie straszy - zazwyczaj nie potrafię znaleźć odpowiednich proporcji - tym razem jednak mi się podoba);
    • zielono-musztardowy jest bardzo stylowy (i znów coś co wydaje mi się sztuką - znalezienie takiego odcienia zieleni dla tekstu, który nie będzie wyglądał smętnie - tutaj zieleń mniej naturalna i trawiasta niemniej jednak zieleń);
    • malinowo-fioletowy to typ mocno rozrywkowy (taki czerwono-magentowy kolor to mój typ na strony internetowe - co chyba widać wyraźnie ;) - niebieskawy fiolet świetnie z nim współgra
  • skrypty: dość typowy zestaw chociaż chciałabym zwrócić uwagę, że od pewnego czasu zrezygnowałam z blogfrogowych wklejek na rzecz FotoForum i Flickr; lista dla tego szablonu wygląda tak:
  • oczywiście jest i uda(wa)na Stopka
  • kategorii nie powinno być więcej niż trzy może cztery wiersze... potem zaczynają mieszać się z tytułem co będzie mocno nieestetyczne ale jak wszystko i to można poprawić; zdeterminowanym polecam zwiększyć padding w elemencie: #BlogTytulBox {padding: 90px 20px 80px 20px;}
  • szablon jest lekki i lewostronny; jedyna grafika to ikonka RSS w prawym górnym rogu; szablon jest przystosowany do zdjęć w notce wielkości 480px (jeżeli ilustracja jest jednocześnie linkiem to ma ramkę po 2px z każdej strony czyli wtedy maksimum jest 476px); tekst jest pisany drobną czcionką co oznacza że w 480px zmieści się około 70-75 znaków
środa, 05 sierpnia 2009

Im mniej ciekawa jest litera, tym bardziej użyteczna jest dla typografa.

Piet Zwart
15:17, kate_mac , cytaty
Link Dodaj komentarz »
Zakładki:
O blogu i RSSsubskrybcja
Polecane wpisy z blogu
Pomocne
Przeglądarki
Katalogi szablonów
Polecane strony
Szablony z dedykacją
o CSS (notki z tego bloga i podobnych bloksowych)
o arkuszach stylów ogólnie (CSS) dla poczatkujących,
głównie zewnętrzne podręczniki
o CSS (przydatne podpowiedzi) dla średniozaawansowanych
- specyficzne rozwiązania
- jak reagują przeglądarki
Historia polecanych
Kolory
Pismo
Polecane artykuły
ilustrowany przewodnik po bloksie dla początkujących,
dla zielonych jak szczypiorek na wiosnę,
dla zaczynających bloksowanie
Tagi
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...