EpicWEB.plwebdesign, programowanie, phat lewt!

o autorze / projekty / kontakt

Bezpieczeństwo / CSS / Epic Loot / Flash / Fsck Up / GFX / Google / Gry / Hosting / HTML / JS / Miniblog / MySQL / OS / Other / PHP / Praca / Techblog / Web

Ostatni projekt: ddrpl.com

Google Browser Size

Każdy, kto interesuje się kulturą pracy w Google wie, że pracownicy mogą poświęcić 20% swojego dnia pracy na rzeczy nie związane z ich głównym zajęciem takie jak tworzenie nowych produktów lub praca w innych zespołach. Oczywiście wszelkie stworzone w ten sposób projekty stają się automatycznie własnością Google, ale to już inna sprawa.

Jednym z efektów pracy w 20% jest Google Browser Size. Stwierdzić, że jest to prosta aplikacja jest lekkim nadużyciem - jest to diabelnie prosta aplikacja.

Zadaniem Browser Size jest pokazanie jaką część strony widzą użytkownicy różnych rozdzielczości ekranów bez konieczności przesuwania strony. Dodatkowo widzimy procentową ilość osób, które zobaczą elementy mieszczące się w oknie przeglądarki (uwaga, nie jest to wartość informująca, ile osób używa danej rozdzielczości - informuje ile osób przegląda stronę z oknem przeglądarki - a dokładniej oknem dokumentu - w tym lub wyższym rozmiarze [1]).

Google Browser Size - Epicweb.pl

Osobiście uważam, że narzędzie to nie będzie się cieszyć dużym powodzeniem - po pierwsze nie bierze pod uwagę tego, że większość stron jest centrowana, przez co efekt pomiaru jest zniekształcony (poprawia się to, jeżeli przeskalujemy okno przeglądarki), a po drugie decyzja o tym, gdzie umiejscowić dany element powinna być podejmowana już na etapie tworzenia grafiki serwisu przez webdesignerów, a nie w momencie kodowania strony.

[1] edycja, zgodnie ze stroną O Projekcie jest to wielkość okna, a nie rozdzielczość

14 komentarzy | GFX, HTML, Techblog, Web 18 grudnia / 09:07:14
URL Trackback

Photoshop Elements i przeźroczyste pliki TGA

Ostatnio wraz z żoną bawimy się w tłumaczenie programów z różnych języków na trochę bardziej przystępny. O ile w moim wypadku ogranicza się to do przerabiania obrazków i czcionek bitmapowych, o tyle żona dorwała program, który grafikę trzyma we własnym formacie. Na szczęście udało się go przekodować do TGA.

Niestety, nie wszystko było takie proste - okazuje się, że po zapisaniu zmian w pliku i odpaleniu programu dookoła zmian wyświetlają się kolorowe tła. Niby tak właśnie Photoshop Elements ów plik otwierał i naiwnie założyłem, że sam program ma gdzieś zakodowany kolor przeźroczystości dla danej bitmapy.

Pierwsza podpowiedź co się dzieje przyszła, gdy oryginalny plik TGA otworzyłem w Irfan View. Poniżej przykład pliku w Irfan i Photoshop:

Irfan View - Dobrze Photoshop - źle

Podpytanie grafików w pracy nic nie dało. Na szczęście Google nie zawiódł! TGA w odróżnieniu od PNG czy GIF nie używa konkretnego koloru czy wartości Alpha z RGBA do uzyskania przeźroczystości lecz stosuje maskę Alpha. W Photoshop CS przehodzimy na zakładkę "Kanały" (Channels) i wybieramy warstwę Alpha - teraz pracujemy jak na normalnej masce.

Wszystko fajne - ale jako że nie używamy z żoną Photoshop CS tylko Elements pojawił się problem - w Elementsie nie można edytować Kanałów, a już na pewno nie kanału Alpha. Na szczęście Google nie zawodzi - by uzyskać podobny efekt w Photoshop Elements należy:

  1. Otworzyć interesujący nas plik TGA
  2. Wybrać Select > Load Selection
  3. Z listy wybrać "Alpha 1" i tryb Replace

W ten sposób pojawi nam się nowe zaznaczenie będące odpowiednikiem kanału Alpha - wszystko to, co jest NIE zaznaczone będzie traktowane jako przeźroczysta część obrazka. Zostaje nam tylko zmodyfikować maskę i analogicznie:

  1. Wybrać Select > Save Selection
  2. Z listy wybrać "Alpha 1"

W ten prosty sposób żona jest podwójnie szczęśliwa - może edytować sobie pliki i wszystko działa oraz zaoszczędziła minimum 2.000 PLN potrzebnych na zakup Photoshopa CS :-)

Dodaj komentarz | GFX, Techblog 27 października / 21:02:08
URL Trackback