I bez komentarza. approveapp.com

4 stycznia, 2012 – 9 grudnia 2011, w każdym z 15 krajów i regionów, w których jest reprezentowana, Fotolia udostępniła kolekcję TEN. TEN jak 10 artystów, 10 tematów, 10 miesięcy oraz 10 PSD. TEN jest jedynym takim projektem promującym sztukę cyfrową do celów edukacyjnych oraz społecznościowych. Projektanci grafiki uzyskują w ten sposób możliwość pobrania za darmo przez 24 godziny pliku PSD z warstwami autorstwa znanego artysty, co umożliwi projektantom zdobycie nowych umiejętności i dalszy rozwoj własnych prac. Pierwszy projekt autorstwa Soemone (Pierre Doucin), został pobrany przez 14 711 osób! Drugim artystą uczestniczącym w projekcie TEN jest Xavier Bourdil, alias Trust in Elements, który przedstawi swoją pracę na temat „Rodzina”, a jego projekt będzie udostępniony w postaci darmowego pliku PSD już we wtorek 10 stycznia na www.fotolia.pl/ten.

Uf zdążyłem :)

Kto nie miał problemu z masą „poprawek”, niezrozumieniem, niedocenianiem ilości pracy, problemem klienta który nie potrafi obejrzeć projektu w powiększeniu 100%, wyobrazić sobie jak projekt „naprawdę” wygląda? Kto nie ma stosu list ze zmianami, renegocjacjami budżetu, reakcją klienta raz na jakiś czas ale powołującego się na określone deadline, ten nie musi czytać.

No to połowa odwiedzających odpadła, teraz odsiewamy kolejnych: kto korzysta z zarąbistych systemów które pozwalają udostępniać i prezentować naszą pracę i nie szuka rozwiązań lepszych, prostszych i może elegantszych ten nie czyta dalej. Ile odpadło?

Ok to teraz już konkret. Wymyśliłem x czasu temu rozwiązanie do prezentacji projektów graficznych klientom on-line. Projekt jakiś czas leżał w głowie i dojżewał. Następnie około 14 miesięcy temu naszkicowałem pierwsze kilka screenów jak to powinno wyglądać … i przeleżało ponad rok w szufladzie.

Ale problemy prezentacyjne pozostały oraz problemy z odbijaniem projektu (projekt – zmiany – projekt – zmiany … itp) pozostały niezmienne i nie było istotne w jaki sposób to próbowaliśmy rozwiązać. Czasem to klient nie rozumiał, czasem w nawale wysyłało się na serwer ale zapominało posłać info w mailu a to klient twierdził że nie dostał. No co któryś projekt coś zawsze stawało na drodze.

Więc na własne potrzeby postanowiliśmy już ekipą w thoke wdrożyć w życie mój pomysł. Otrzymał on nazwę approveapp (roboczo nazywamy „appapp”), kupilłem domenę, dorobiłem kilkanaście screenów, przemyślałem działanie niektórych opcji po raz enty i do wdrożenia. Aplikacja jest na ukończeniu, wg założeń na oddanie bety do testów potrzeba nam jeden dzień, ale znając złośliwość rzeczy martwych okaże się że pewnie +1 lub dwa dni. Aplikacja działa jak dla mnie znakomicie, podstawowym założeniem jej działania było:
- uproszczenie zarządzania i działania (naprawdę uprościłem wszystko do maksimum)
- skrócenie czasu potrzebnego na przygotowanie prezentacji
- automatyzacja komunikacji (maile dostajemy z systemu, a nasze działanie ogranicza się do wskazania pliku na dysku)
- możliwość kontroli co kiedy komu było pokazane (ta opcja będzie dopiero w pisanej aplikacji do prezentacji i kontroli na ipada … lub dopiszemy moduł – zobaczymy po beta testach)
- pokazanie ilości screenów klientowi w jednym miejscu
- pokazanie ilości zmian klientowi w jednym miejscu (jak powie że ma być zielone a potem różowe to już nie będzie miał opcji bajać że jednak miało być zielone)

Całość ma być darmowa, umyśliliśmy że jeśli spodoba się to wprowadzimy możliwość założenia konta „pro” z kilkoma opcjami przydatniejszymi firmie a konto dla freelancerów z możliwością wgrania kilku projektów i kilkudziesięciu – kilkuset screenów pozostanie za free. Zakładamy że konto pro będzie kosztować kilka zł za miesiąc, a pieniądze z tego mają być przeznaczone na utrzymanie serwisu. Takimi opcjami zaawanosowanymi będzie np. wgranie swojego logo i pod swoją domeną i opcje związane bardziej z kalendarzami, finansami i umowami.

Samo approveapp.com jest pierwszym projektem z kilku, dedykowanych dla osób zajmujących się kreacją, kolejnymi będą … ale chyba nie powinienem mówić. Na pewno pozostałe projekty będą połączone z appapp i między sobą i pozwolą łatwiej i szybciej poprowadzić projekt.

Czy nam się udało, najpierw przekonają się wybrani beta testerzy. A zapisy na beta testy kończymy w piątek 17 listopada (tak, tak – ten), zapisać się można na approveapp.com.

Największe perełki powstają z pod myszek i piórek najbardziej doświadczonych desingerów – i tu pojawiają się głosy że

Wszyscy się zachwycają bo zrobił to XXX, ale przecież tu nic nie ma i ja bym to zrobił w 5 min

Tylko te ktosie które głosują w ten sposób nie robią, a jak już to wygląda ich dzieło jak kupa. Bo minimalizm jest trudniejszy niż popis umiejętności i buchające fajerwerki … fajerwerki ukrywają niedociągnięcia a minimalizm wyciąga każdą niedoskonałość. Dla tego te dobre projekty są wykonywane tylko przez najbardziej doświadczonych, a nie nowicjuszy – trzeba to czuć.

Minimalizm wymaga niesamowitej dbałości o detale (są projekty w których dobiera się ikonkę facebooka dniami), wymaga wyczucia i intuicji, wymaga znajomości spraw technicznych oraz przyzwyczajeń odbiorcy. Obcinanie funkcjonalności wymaga też myślenia i logiki. Bardzo często wymaga też setek prób i wracania do początku koncepcji, wymaga też od samego twórcy sporej elastyczności oraz uporu (sprzeczne prawda?). Dla tego osoba początkująca najczęściej polegnie i dla tego najlepsze rzeczy robią wyjadacze – nie dla tego że mają renomę, dla tego że mają więcej cierpliwości uporu i pokory … nie wspominając o takich detalach jak doświadczenie czy warsztat.

I oczywiście są wyjątki.

jak zrobic zeby duze zdjecie ładowało sie szybko a kompresja nie była widoczna??? czy sa jakieś magiczne sposoby o ktorych nie udało mi sie dowiedzieć?
czy tez może załozyc ze teraz juz wszyscy maja dostep do internetu na tyle szybki że kilkanascie sekund ładowania nie jest baaardzo wkurzajace?

Od końca – kilkanaście sek to za długo jak dla mnie, trza coś zrobić żeby ładowało się max 5-7 s. Sposobów jest na to kilka, potrzebna jest też elementarna wiedza na temat kompresji i optymalizacji grafiki. (teraz piękny tekst) Za moich młodych lat, kiedy coś takiego jak projektowanie stron to było novum taka wiedza była niezbędna. Zmniejszenie wagi strony o 1 kilobajt to był wielki sukces … teraz nawet dla mnie zauważalna różnica to dopiero sto-krotność tej wartości. Ale przy dużych zdjęciach wiedza się przydaje.

Ja zakładam że ludziska mają szybkie łącza, przynajmniej zakładam że ta akurat grupa docelowa powinna mieć szybkie łącze. Ok, ale dość wspominek, konkrety:

Kolor tła pozwalający na odczytanie informacji przed załadowaniem grafiki
Banalne? Niekoniecznie, co i rusz spotykam stronę która ma w tle ciemne zdjęcie na nim białe litery a background jest ustawiony na #FFFFFF – efekt, przed załadowaniem zdjęcia nie zobaczę nic.

Odpowiedni dobór zdjęcia, nie każda fota się kompresuje
niby każda … ale jedna lepiej a druga gorzej, duże jednolite powierzchnie z gradientem poprzedzielane elementami skompresują się niezależnie od formatu kiepsko. Nie trzymać się kurczowo jednego zdjęcia, często lepiej poświęcić czas na znalezienie alternatywy … zresztą dobry dobór zdjęcia to połowa sukcesu w takim wypadku.

Wybór odpowiedniej metody kompresowania
Gif odpada (gif to zabawa dla ludzi którzy wiedzą jaki efekt osiągną … taka trochę specyficzna zabawa), png przy skomplikowanym zdjęciu będzie duży a jpg da nieprzyjemne fraktale przy odrobinę większej kompresji kiedy elementy jednolite będą graniczyć z niejednolitymi. Cała powierzchnia niejednorodna idealnie pasuje do kompresji jpgiem a przy całkowicie jednolitym tle wybieramy png (gif czasem też przejdzie – rada: popróbować i patrzeć na stosunek wielkości do jakości).

Znać sztuczki, np. zamaskować kompresję
Sztuczka stosowana przeze mnie dość często kiedyś a i teraz w dwu projektach wróciłem do tego (zmieniło się jedynie to że kiedyś maskowałem kompresje jpg a teraz jakość filmu). Dajemy 2 tła, jedno zdjęcie skompresowane do jpga w jakości która odrzuca każdego estetę a na to dany plik png/gif o wymiarach 2px na 2px z kratką (jak w przykładzie obok ). Efekt, zdjęcie trochę przyciemnione albo rozjaśnione ale nie widać nic kompresji.

Podzielenie tła na mniejsze części
Kiedyś na portfolio misz.com ten trick stosowałem – ale obecnie chyba nie polecam. Na pewno szybciej ściągnie się 5 mniejszych grafik niż jedna duża (choć procentowo to nie wygląda atrakcyjnie). Rozwiązanie to posiada jednak jedną wadę – po załadowaniu tylko części tła projekt najczęściej wygląda kiepsko. Oczywiście efekt ładowania kolejnych kawałków może być zamierzony …

Celowo ominąłem flasha, preloadery czy nie wspomniałem o cashowaniu obrazków bo to temat rzeka. I to chyba na tyle, mama wrażenie że wyczerpałem temat – jeśli nie to poprawcie mnie.

Jak ktoś już przyuważył, słusznie zresztą, takowe prace można wydziergać w Photoshopie … a jako że ja się w tym narzędziu czuje najlepiej właśniem tak uczynił. Żaden Ilustrator czy inne wynalazki, sam Ps CS4 i dodatkowo nie użyłem ani jednego pędzla – tylko obiekty i style warstw i odrobinę masek.

to zwykłe shape’y, zabawa z zaznaczeniem i miękki pędzel

Właściwie poza samą geometrą to cała magia to efekty warstw i gradienty. Co by było śmieszniej całość jest banalna. Dalej idąc … żeby zabawniej było cienie nie są zgodne ni cholery, jak ktoś się przyjrzy i zastanowi z której właściwie strony mogło by padać światło to nie dojdzie za nic.

Najtrafniej strzelił Zan w komentarzach stawiając na jedynie Photoshopa, reszta kombinowała od Ilustratora po soft 3D

Po co używać softu 3D do zrobienia zwykłego pudełka z gradientami? To wszystko można zrobić w PS nawet bez opcji 3D.

Kilkanaście warstw nie jest warte podniecania się, bez problemu krok po kroczku każdy to wykona. Ja sobie biorę Rounded Ractangle Tool z promieniem 15px a następnie rysuje „kwadrat” (z Shiftem). Taki obiekt potem (Command+T) przekrzywiam, trochę zdejmuje z wysokości a następnie, przytrzymując Command, nadaję odrobinę perspektywy.

Następnie duplikuje obiekt i przesuwam go 20px w dół (dla higieny i dobrego widoku zamieniam jego kolor na ciemniejszy). W ten sposób powstała podstawa. Teraz trzeba jakoś uzupełnić wcięcia powstałe po przesunięciu „spodu”, ot wystarczy dwa prostokąty Rounded Tool dać po bokach. Prostokąty i „spód” łącze robiąc z tych trzech obiektów Smart Object. Teraz dodaje style do warstw mniej więcej w ten sposób co w obrazku powyżej.

I tak kroczek po kroczku dalej, w katalogach z maską daje łuki imitujące błyski z gradientami, na kolejnych warstwach duplikuje te same obiekty zmieniając im Fill na 0% i dodając kolejne style – gradienty, Stroke. Tak jak mówiłem – żadna filozofia. Mnie wydzierganie jednej ikonki, w zależności od skomplikowania logotypu serwisu, zajmuje 20-30min. Szkoda że tylko tych minut mi tak ostatnio brakuje.

Jakby ktoś nie przyuważył to jest druga seria do pobrania, właściwie po prostu wwaliłem do poprzedniej paczki kolejne ikonki, i zaraz dorzucę następne bo twitter.com i grono.net (jeśli ktoś tego jeszcze używa) gotowe został deviantart.com do następnej paczki.

Kolejna sprawa – jeśli macie jakieś życzenia co do serwisów, chętnie zrobię te które wam się wydają bardziej potrzebne/przydatne. Dawajcie sugestie i najlepiej link do logotypu w krzywych :D Tylko warunek że są to serwisy raczej społecznościowe albo przynajmniej znane.

Dodałem też przycisk „donate”, gdyby ktoś uważał że ikonki są warte cokolwiek … będzie mi miło a i chęci się zdecydowanie zwiększą (a mam w planach większą serie tym razem bardziej związaną z systemem i programami).

Pojawiły się tapety o które mnie proszono (wszystkie tapety mają 2 rozmiary – 1920x1200px i 1280x800px) w sumie koło 20 plików:

• Alicja w krainie czarów
• Poster Imagination or Madness
• Walper for law office

Dzięki Kubie mam nowy player do odtwarzania filmów – bardziej pasujący do reszty prezentacji (jeszcze chce go pomęczyć o preloder i pierwszy screen z filmu … ale to jak się ogarnie a i ja rozliczę pierwszą fakturę w tym miesiącu). Delikatnie też zmieniłem jakość filmów co by się szybciej ładowały.

Mam przygotowane prezentacje jeszcze 5 projektów (w tym 1 z screencastem) – niestety czekam na ich publikacje. Co prawda jeden pojawił się już publicznie jako beta, ale chyba przez pomyłkę a mam już dość bzdurnych oskarżeń więc poczekam do czegoś bardziej oficjalnego … chyba żeby nie. Na tapecie jest też kilka bardzo fajnych projektów z których dwa dokumentuje na filmie – pewnie do publikacji jeszcze dłuuuuga droga ale mam nadzieje że będzie warto.

I już za chwileczkę już za momencik drukuje portfolio – pdf i fotami nie omieszkam się podzielić.

Rano przy okazji wizyty w drukarni z materiałami dla firmy odebrałem wydruki a drugi wieczór poświęcony na montaż, eksport i wgranie na YouTube (plansza końcowa jest skopana ale nie mam już ochoty puszczać export po raz trzeci i czekać 4h). Tu podziękować muszę redakcji która poświęciła mi 5 min na przypomnienie jak to się w Premierze wszystko ustawia. Parę ciepłych słów się należy za motywację do działania.

Szybko się też przekonałem że muszę popracować jeszcze sporo nad „zabawą” w kręcenie – przebitki które sobie porobiłem w 90% nadają się do kosza. Trza zainwestować przy okazji jakiegoś projektu w oświetlenie i jeszcze jedno szkło i parę innych sprzętów … spokojnie systematycznie i zawsze wtedy kiedy będzie zamówienie się dokupi. Na razie wracam do budowy lampy kołowej.

Puszczę jakoś szybko plakaty w portfolio i dostałem sugestie co by zrobić jeszcze tapety na pulpit co z wielką przyjemnością zaraz popełnie.

Przez chwile nawet się zastanawiałem nad podjęciem się zadania i opisywaniu z czystą złośliwością (charakterystyczną dla mnie podobno) wyżywanie się na tych „cudnych” tutorialach. Niestety wydało mi się to dość niemoralne, reklamowałbym coś czego tak na prawdę nikomu bym nie polecał. Idąc tym tropem zdjąłem reklamy googla z bloga, na których często (nie wiedzieć czemu :P) pojawiały się odnośniki do stron jakiś agencyjek o poziomie usług urągających nawet szablonom sprzedawanym na allegro.

A tak naprawdę to spora część za te kilka centów sprzedaje się jak tania dziwka, może czas się zastanowić i jednak powiedzieć głośno że reklama na blogach jest fee?