O szablonach, ich projektowaniu i moich z tym zmaganiach...
niedziela, 29 marca 2009

Typography in Motion from ilovetypography.com on Vimeo.

Filmik typography to żadna nowość ale na początek nowej kategorii wpisów dotyczących właśnie takiego wykorzystania typografii ten filmik nadaje się świetnie. W kreatywny sposób zaprezentowane są tu podstawowe pojęcia związane z typografią. Filmik trwa niespełna dwie minuty i jest rodzajem animowanego wprowadzenia do typografii. Zresztą poczatek tekstu w filmiku to tylko odrobinę zmieniony fragment książki Alana Pipesa: Production For Graphic Designers.

Typography is the art and techniques of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and (kerning) adjusting the space between pairs of letters.

Filmik został stworzony przez studentów Vancouver Film School: Ryana Uhricha and Marcosa Ceravolo. Pierwsze zdanie: "Typography is what language looks like." to słowa Ellen Lupton, autorki książki: Thinking With Type. Autorem innego zdania wykorzystanego w filmie: "A good typographer is someone who communicates a point of view with skill and imagination and makes the type taste good" jest Jeffrey Keedy

Marcosa Boca Ceravolo:
"Our objective was to use type as the main aesthetic and design element to create awareness about the evolution and main characteristics of typography. Both the music and voice over used in the piece make reference to 1950’s TV and Radio advertising. We are targeting designers and non designers who have an interest in typography and want to learn more about it."

Zapraszam do obejrzenia - it taste good.

wtorek, 17 marca 2009

Pora na trzeci filmowy szablon. Tym razem nie Marilyn Monroe ale Charlie Chaplin. Od razu ostrzegam: nie widziałam Brzdąca. Charlie Chaplin to bezsprzecznie klasyka kina i gdy zdarzy się okazja zobaczenia Chaplina to jej nie unikam jednak z drugiej strony takiej okazji też nie szukam. Do trzeciego szablonu wybrałam Chaplina z dwóch powodów: jest bardzo wyrazisty i czarno-biały. Wyrazisty to chyba słowo które dobrze opisuje tez mój nowy szablon na bloga i o to właśnie chodziło.

trzeci szablon filmowy na bloga - The Kid

Uwagi o szablonie:

  • Oczywiście inspiracją do takiej a nie innej kompozycji szablonu były zdjęcia z filmu.
  • BrzdacSzablon kolorystycznie mieści się w odcieniach szarości za wyjątkiem krwisto czerwonych tytułów notek i linku do RSS.
  • Kompozycja jest trzy-kolumnowa przy czym kolumna pierwsza nie zawiera żadnych treści a jedynie zdjęcie z filmu które w większości przeglądarek nie przewija się i cały czas jest widoczne (oczywiście w IE6 jest inaczej). Szablon najlepiej będzie wyglądał w rozdzielczościach ekranu powyżej 1024px szerokości. Środkowa kolumna zawierająca treść jest najbardziej wyrazista. Ostatnia, znajdująca się po prawej wąska szpalta jest bardziej stonowana i 'przyszarzana' aby nie odwracać uwagi od treści (content).
  • W szablonie po raz pierwszy wykorzystałam krój o nazwie Impact. Jest on bardzo zdecydowany i ma charakter wyraźnie afiszowy. Jest ciężki, gruby i trochę przytłaczający. Na dodatek niezbyt ładnie się wyświetla na ekranie. Dlatego właśnie zdecydowałam się na bardzo duży stopień pisma a przy nieco mniejszym użyłam koloru o niskim kontraście z tłem.
  • I na koniec nieco o linkach w notkach. Są bardzo nietypowe i bardzo wyróżniające się. Za taki ich wygląd odpowiedzialny jest ten fragment kodu:

    .BlogWpisTresc a, .WstepKomentowanegoWpisu a, .TrescKomentowanegoWpisu a, #StatycznaZawartosc a {
        padding: 0px 3px 2px 2px;
        background:#222;
        border-left:4px solid #000;
        color:#ddd;
    }
    .BlogWpisTresc a:hover, .WstepKomentowanegoWpisu a:hover, .TrescKomentowanegoWpisu a:hover, #StatycznaZawartosc a:hover {
        background:none;
        color:#666;
    }

    Opisuje on ogólnie wygląd linków w notkach (tylko i wyłącznie w notkach ale zarówno na stronie głównej bloga, stronie z pojedynczą notką czy stronie statycznej). Jeżeli dla kogoś taki wygląd jest zbyt rzucający się w oczy wystarczy usunąć ten fragment kodu z arkusza a linki w notkach dostaną wygląd analogiczny do pozostałych czyli będą szare, jaśniejsze niż tekst a po najechaniu czerwone. 
  • szablon jest dostosowany do kilku popularnych skryptów: zwijane archiwum (testblog), zwijane archiwumostatnie komentarze (testblog), zwijane zakładki (experymenty informatyczne), avatary z MBL w komentarzach (pioornik), bloczek - wpisy z blogów (blogfrog), bloczek - nowe blogi (blogfrog) (experymenty informatyczne),
  • opisany jest też wygląd tagów delicious na blogu, czy też fałszywej stopki
niedziela, 15 marca 2009

Tym razem w serii serdecznie postanowiłam wrócić do nieco starszego pomysłu czyli do szablonów z serii Glossy. Było ich pięć: czerwony, zielony, niebieski, różowy i fioletowy. Za wyjątkiem czerwonego wszystkie są prawostronne. Różnią się nieco proporcjami nagłówka ale wszystkie mają ten cieniowany efekt glossy w winiecie. Tym razem zrezygnowałam z efektu glossy pozostawiając poza nim niemal wszystkie charakterystyczne dla szablonu niebieskiego glossy elementy: te same proporcje, podobna kolorystyka, te same kroje...

szablon na bloga niebieski z łabedziami

trzeci szablon serdeczny - niebieski z łabędziami

Uwagi:

  • szablon jest wyraźnie niebieski ale w nieco innym odcieniu niż jego pierwotna glossy wersja
  • w winiecie szablonu wykorzystałam grafikę umieszczoną w serwisie flickr na licencji cerative commons, oryginalne zdjęcie jest autorstwa mozzercork
  • Oczywiście opisałam pewne skrypty i dodatki: zwijane archiwum, zwijane archiwum, ostatnie komentarze, zwijane zakładki, avatary z MBL w komentarzach, Bloczek - wpisy z blogów, bloczek - nowe blogi, tagi delicious na blogu
  • 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)
niedziela, 08 marca 2009

Let's Make Love nie jest najlepszym filmem Marilyn Monroe. Szczerze mówiąc bywa uważany za jej najgorszy. Aż tak źle bym go nie skomentowała choć trzeba przyznać, że to niespecjalny film. Ma jedna kilka mocnych momentów, które mogą choćby częściowo rekompensować kiepską reżyserię czy źle dobrane kostiumy. Z całą pewnością będzie to ostatnia scena (scena w windzie) czy też sceny Montanda z Berlem, Crosbym czy Kellym. Jest jednak jedna scena, którą nawet osoby nie zainteresowane tym filmem rozpoznają i skojarzą z Marilyn Monroe: pierwsza scena Marilyn w tym filmie czyli piosenka My Heart Belongs to Daddy.

szablon filmowy 02 Let's Make Love

Szablon filmowy 02, Let's Make Love,
na starym kodzie, dla blogów na blox.pl. -500px- 


W pierwotnej wersji szablon powstał w marcu 2009 roku jednak z tej oryginalnej wersji nic poza tematem nie zostało. U podstaw zmiany znalazło się proste założenie: temat ma zostać a szablon ma być zwyczajnie ładny. Można to osiągnąć na wiele sposobów, ja postawiłam na biurowy koncept i w części zmienną szerokość.

 

Adres szablonu: http://filmowy02szablonkatemac.blox.pl

fragmenty szablon filmowy 02

Uwagi o szablonie świątecznym 01 - z choinką
szerokość szablonu auto (740px/960px/1160px)
szerokość kolumny z główną treścią 740px
szerokość pobocznej szpalty auto (170px)
dodatkowe kolumny 1. kategorie
2. treść główna
3. treść poboczna, która automatycznie dzieli się na dwie kolumny
kolor tła białe (#fff) w body beżowe zależne od grafiki (#e2d0b6)
kolor tekstu czarny (#36382E)
kolor linków szary (#585858)
pozostałe kolory czerwony (#CA0009)
krój użyty w notce Trebuchet MS; dodatkowo Devonshire dla etykiet
wielkość tekstu notki small (ok 14px)
interlinia w notce 1.6em
maksymalna wielość elementów graficznych w notce 500px (ilustracje się skalują)
css-owe ramki przy grafikach nie
wypunktowanie/numerowanie automatyczne
wzmocnienie/emfaza automatyczne
blok cytatu (blockquote) przesunięcie, częściowa transparentność i kursywa
nagłówki w notce
(h1, h2, h3, h4, h5, h6)
automatyczne
h3, h4 - powiększenie i zmiana fontu na Devonshire
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 0Etheme Spokojnystary kod: 0Etheme Spokojny
skrypty użytkowników, wklejki zwijane zakładki, zwijane archiwum, wyróżnienie komentarzy autora, Ostatnie komentarze, delicious

dodatkowe klasy i identyfikatory

#menuTop - górne menu (długość 100%)
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie
#menuIkon - górne menu z małymi obrazkami

Pierwotnie szablon wyszedł mi jakoś nieciekawie. Pomysł był ciekawy, obrazki ładne ale całość średnio mi się podobała. Gdy stworzyłam zimą 2012 roku szablon z choinką spodobał mi się nowy pomysł. Jest trochę bałaganiarski i nadmiernie wykorzystuje przestrzeń ale co tam... sam pomysł porozrzucanych na biurku rzeczy towarzyszy mi od samego początku blogowania.

W przypadku tematu Let's Make Love konieczna była obecność Marilyn, chciałam także aby szablon był bardziej retro glamour. I mam nadzieję, że mi wyszło. W dużej mierze jest to kwestia wyglądu nagłówka i rzeczy tam umieszczonych więc przy zmianie topu łatwo będzie zmienić klimat.

Wymiana tła dookoła bloga

wzorek z szablonu filomowego 02

Takie tło dookoła blogu jest rzeczą którą najłatwiej można zmienić. Zawsze jednak proponuję zmieniać na coś podobnego kolorystycznie. Generalnie większość elementów ma własne tła więc jasność tego wzorku nie jest najistotniejsza ale jeżeli chcesz aby dalej można było odczytać datę wpisu to zdecyduj się na jasne tło. Jeżeli chcesz zachować styl glamour retro to wybierz coś stonowanego i raczej wypłowiałego.

W tle dookoła bloga wyświetla się zwykły wzorek udający jasne deski. Tradycyjnie są dwa sposoby wymiany tła: przez nadpisanie (plik nazywa się fm2_bg.jpg; jeżeli kopiowałeś szablon wielokrotnie to upewnij się co do nazwy sprawdzając zasoby własnego bloga) albo poprzez wymianę adresu wywołania w arkuszu CSS (grafika przypisana jest do elementu body).

Usunięcie fotosów Marilyn

Sam tytuł bloga i karteczki pod nim tworzy odpowiedni kod CSS. Elementy maja przypisane własne tło graficzne i są odpowiednio przekręcone. O tym elemencie będzie jeszcze niżej.

Część graficzna tytułu czyli fotosy Marilyn, okulary, wycinek z gazety, biżuteria to jeden plik przypisany jako tło selektorowi odpowiedzialnemu za całość bloga. Tradycyjnie możesz usunąć ten plik albo go zastąpić własnym. Aby zastąpić w szablonie plik z choinką musisz go albo nadpisać w zasobach bloga (plik nazywa się fm2_top_01.png; jeżeli kopiowałeś szablon wielokrotnie to upewnij się co do nazwy sprawdzając zasoby własnego bloga) albo wymienić adres wywołania w arkuszu CSS (grafika przypisana jest do elementu #BlogGlownyBox).

top z 2 szablonu filmowego

Szablon bez tych elementów wygląda równie dobrze więc wystarczy jak je usuniesz ale równie dobrze możesz skomponować własne biurko pamiętając aby zostawić przezroczyste tło (plik typu png).

Miejsce na tytuł bloga

Tytuł bloga jest w tradycyjnej postaci - tekst z linkiem. Czerwona i serduszkowa karteczka pod nim to nic innego jak obrócone elementy - takie transformacje to kolejna z nowości z CSS3. Karteczka na wierzchu to nic innego jak biała tekstura tapety. Jeżeli chcesz to możesz przygotować własną karteczkę i jakimś ozdobnym fontem napisać tytuł bloga.

Karteczka ma wymiary 400×247px więc swoją przygotuj też takiej wielkości. Może mieć transparentne tło - w takim przypadku na blogu będzie wyświetlać się na białym. Dodaj swój plik do zasobów bloga.

Teraz wystarczy, że przejdziesz do arkusza stylów (edycja CSS) i odszukasz miejsce w którym opisany jest link tytułu bloga.

#BlogTytulText a {
 width:360px;
 height:177px;
 padding:70px 20px 0;
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
 transform: rotate(3deg);
 box-shadow: 0px 1px 6px #666, 50px 50px 100px hsla(0,0%,100%,.7) inset;
 background:#fff url(/resource/fm2_bg3.jpg) repeat center center;
 display:inline-block;
 color:#000;
 font-size:3.2em;
 line-height:1em;
}

Pierwszy podkreślony fragment to adres ilustracji w tle. Wstaw tam adres własnego pliku. Pozostałe linijki opisują inne cechy tego elementu: cień, wielkość, transformację a także zmianę elementu liniowego w blogowy. To ostatnie jest o tyle istotne, że jeżeli zechcesz ukryć linkujący tytuł bloga to możesz to zrobić bez obaw. Ukryjesz tylko słowa, przestrzeń linkująca pozostanie.

Na koniec tego kodu jest opis koloru i wielkości czcionki. Jednym ze sposobów ukrycia tekstu tytułu bloga jest zmniejszenie rozmiaru kroju do zera i dla bezpieczeństwa nadanie mu koloru tła. Dla tego konkretnego szablonu będą to takie wartości:

 color:#fff;
 font-size:0px;

daddyMarilyn obok tytułów notek

Obrazki z Marilyn na początku każdej z notek to fragment wspomnianego na początku plakatu. W szablonie zdecydowałam się użyć kilka i korzystając z możliwości jakie daje CSS3 poprzypisywałam tych kilka obrazków do kolejnych tytułów notek. Jaka ikonka wyświetli się przy jakim wpisie zależeć będzie od tego który to wpis na stronie i czy jest to jedyny wpis danego dnia.

Jeżeli nie chcesz Marylin Monroe na swoim blogu to po prostu usuń te zdjęcia z zasobów swojego blogu (skopiowały się tam razem z pozostałymi plikami szablonu). To najprostsze rozwiązanie.

Jeżeli chcesz mieć w tych miejscach inne obrazki to najlepiej nadpisz pliki w zasobach. Ikonki powinny nazywać się tak: fm2_mm1.jpg, fm2_mm2.jpg, fm2_mm3.jpg, fm2_mm4.jpg, fm2_mm5.jpg, fm2_mm6.jpg. Jeżeli jednak kopiowałeś szablon kilka razy to ich nazwy wzbogacone zostaną o kolejne cyfry więc najlepiej sprawdź w zasobach blogu (PLIKI).

Menu z ikonkami społecznościowymi

I na koniec wspomniane w tabelce ikonkowe menu - dodatek z małymi obrazkami linkującymi do różnych serwisów. Wkrótce zapewne pojawi się tutaj bardzo dokładna instrukcja ale póki co odsyłam na stronę z szablonem. Tam w jednej z notek opisałam ikonki, których serwisów są już w szablonie, jak z nich skorzystać i co zrobić aby dodać jakąś inną.

Co chwilę przybywa nowych serwisów więc próba opisania ich wszystkich czy choćby tylko najpopularniejszych jest z góry skazana na porażkę. W zależności od czasu poprawek opisane przeze mnie ikonki będą nawiązywały do określonych serwisów. Dlatego zawsze najlepiej sprawdzić to w pobieranym szablonie. Zawsze też można w analogiczny sposób dodać opisy nowych ikonek/serwisów.

stylekatemacblox.plsoup.iogooglewordpresspinteresttwitterYouTubefacebookblog.plRSSnewsletter

W tym konkretnym szablonie umieściłam bardzo specyficzne ikonki zawsze jednak możesz wstawić własne.


sobota, 07 marca 2009

Marilyn Monroe nie jest może moją ulubioną aktorką ale zdecydowanie Marilyn to fenomen. Jest kilka takich postaci które poprzez swoje życie a częściowo także i śmierć stały się ikonami. Marilyn do tej grupy należny z całą pewnością i chyba właśnie dlatego serię filmową szablonów na blox.pl zaczynam właśnie od filmu z jej udziałem: Let's Make Love (Pokochajmy się).

szablon filmowy 01 - Let s Make Love

szablon filmowy 01 - Let's Make Love

Uwagi:

  • Zdaję sobie sprawę, że szablon z Marilyn nie każdemu przypadnie do gustu ale w gruncie rzeczy w tym przypadku nie chodzi o Marilyn. Bez większych problemów można usunąć dwa tła na których się pojawia w tym szablonie (od razu podpowiem, że są to dwa pliki umieszczone jako tło przy selektorach: #BlogWazkaSzpalta, #StatycznaBox, .BlogWpisInfo, .SkomentujDodajKomentarzLink, .SkomentujDodajKomentarzLinkPodLista; jaśniejszy gradient umieszczony jest przy selektorze #BlogBodyBox). Usunąwszy grafiki związane z tłem bloga w prosty sposób można też zmienić kolor tła. W tej chwili jest dość intensywny ale wystarczy zmienić w body opis background (na przykładowo #FFECD2) i po problemie.
  • To jest szablon który opiera się na bardzo drobnej Verdanie a dla ozdoby ma większą szeryfową Georgię w różnych, czasami dziwnych miejscach. Verdana jest niewielka ale czytelna i w notce mieści się w jednym wersie ponad 70 znaków czyli górna granica optimum czytelniczego.
  • Szablon jest wąski, maksymalna szerokość ilustracji w szablonie to 450px. Jest także lewostronny więc z większymi zdjęciami też nie powinno być problemu. Najchętniej przypisałabym go do serii rękodzielniczej bo pomijając Marilyn właśnie tej grupie blogów szablon jest dedykowany. Wydaje mi się, że szablon dobrze by wyglądał na blogach poświęconych scrapbookingu czy robieniu biżuterii.
  • szablon jest dostosowany do kilku popularnych skryptów: zwijane archiwum (testblog), zwijane archiwum (experymenty informatyczne), ostatnie komentarze (testblog), zwijane zakładki (experymenty informatyczne), avatary z MBL w komentarzach (pioornik), bloczek - wpisy z blogów (blogfrog), bloczek - nowe blogi (blogfrog)
  • opisany jest też wygląd tagów delicious na blogu, czy też fałszywej stopki
niedziela, 01 marca 2009

Wczoraj miał premierę nowy wygląd bloga mojewypieki.blox.pl. Jest to już druga moja ingerencja na blogu Doroty, w maju zeszłego roku instalowałam na blogu różowy, nieco landrynkowy wygląd. Dorota stwierdziła, że pora na wiosenne porządki, dała mi wolną rękę w kwestii wyglądu bloga i tak oto powstał nowy szablon. Tych którzy jeszcze nie widzieli zapraszam do zerknięcia.

Moje wypieki szablon

Tradycyjnie zacznę od kolorów. Początkowo blog miał nieć cytrusowy wygląd, podstawowymi kolorami miały być ciepła zieleń i pomarańcz (przyznam się, że kolory te wydają się być raczej trudne ale zdarzają się całkiem udane połączenia). Stanęło na czekoladowo-śmietankowej kolorystyce. Przyznam się, że kolor tła jest rodzajem kompromisu pomiędzy moją intensywnie zielona propozycją a tym co najbardziej spodobało się Dorocie czyli lodwo-niebieskim tłem. O tym dlaczego szukałyśmy kompromisu napiszę kiedy indziej a teraz pora na kolory.

F5EDD5EBDCA5997753322117F3333A700007565562A211A
#F5EDD5
#EBDCA5#99775
#332211
#7F3333
#A70000
#756556
#2A211A

Układ bloga jest trzyszpaltowy, w zasadzie bardzo podobny do poprzedniego. Na blogu pozostały działające tam już wcześniej skrypty czyli: zwinięte archiwum w wersji zaproponowanej przez Szymona, zakładki zwinięte są skryptem Eskey’a – tym razem rozwinięte pozostały dwa foldery i dodatkowo wykorzystana jest możliwość wyświetlania zakładek także na stronie z pojedynczą notką. Wyróżnienie komentarzy autora dokonane zostało skryptem popełnionym przez e-maupa. Do wyróżnienia wykorzystane zostało ciasteczko, które już od dawna było na blogu jako favikona, następnie pojawiło się także w winiecie a tym razem jego rola nieco się zmniejsza za to ciasteczko nabrało odrobinę bardziej stylowego wyglądu . I ostatni, chyba najpopularniejszy na bloksie skrypt czyli ostatnie komentarze. Oczywiście autorstwa Szymona.

Jak widać skrypty nie uległy zmianie za to na blogu przybyło kilka elementów zapisanych w najprostszy ze sposobów czyli poprzez html. Pojawiło się klasyczne poziome menu w którym skumulowane są linki dotyczące bloga ogólnie: powrót na stronę główną, link do informacji o blogu i jego autorce, kontakt i księga gości. Drugim elementem są Popularne przepisy. Przydałby się skrypt który generowałby taką listę automatycznie, np. na podstawie listy komentarzy ale dzięki temu że selekcji przepisów dokonałyśmy same można było wyeliminować nie całkiem adekwatne notki (najwięcej komentarzy ma oczywiści wpis będący wprowadzeniem do koncertu życzeń czytelników). Trzecią nową listą jest spis treści. Dla bloga z przepisami bardzo ważna jest możliwość sprawnego znalezienia tego czego się szuka. Dlatego też zamiast linkowa do kategorii odnośniki prowadzą do stron statycznych na których Dorota 'własnoklawiszkowo' sporządziła listy przepisów. Przedostatni nowy element to wyszukiwarka google. Wbrew odczuciu niektórych czytelników na blogu była także wcześniej wyszukiwarka – tradycyjna bloksowa w tradycyjnym bloksowym miejscu czyli tylko na stronie głównej pod wąską szpaltą. Tym razem przeprowadzając drobne testy Dorota zdecydowała się na google. I zdecydowanie ostatni nowy element to miejsc na reklamę.

1 25  4

3 76  8

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...