twojeArtykuły.info

Photoshop+css+html=strona internetowa

dodany przez mtu - kw..28, 2010, w kategorii Strony internetowe

W poniższym artykule chciałbym przedyskutować sposób na stworzenie przejrzystego, funkcjonalnego wyglądy strony internetowej. Bez względu na wykorzystanie tego projektu w różnych aplikacjach np. systemach zarządzania treścią. Zakładam, że osoba czytająca ten artykuł zna przynajmniej podstawową wiedzę z zakresu html, css (strony internetowe gniezno). Nie będę przedstawiał gotowego przykładu, ponieważ sam kod źródłowy mógłby zajmować dwie strony, dlatego oprę się na przykładzie. Nie jest to tutorial, tylko przedstawienie korzyści z wykorzystania pakietu Adobe w tworzeniu stron internetowych. Jest to moja sprawdzona metoda.

W projektowaniu stron internetowych wykorzystuje m.in. aplikację Adobe Photoshop CS3, w której na samym początku rysuje szablon strony. Projekt strony głównej. Program ten umożliwia mi doskonałą obróbkę zdjęć, możliwość tworzenia elementów nawigacji, a co najważniejsze wykonanie całego projektu graficznego strony internetowej,  który w dalszym etapie będę wycinał i programował w css, aby strona wyglądała jak na zdjęciu. Na tym etapie ważne jest, aby znać „gust” Klienta, jeżeli wykonujemy oczywiście stronę dla kogoś.

W jakiej rozdzielczości wykonywać projekt strony internetowej? Zgodnie z wynikami badań przedstawianymi na bieżąco przez firmę gemiusRanking należy projektować w rozdzielczości 1024 na 768. Z tej rozdzielczości korzysta na tą chwilę ponad 27 % internautów. Użytkowników korzystających z mniejszych rozdzielczości jest ok. 1%, a większych pozostała część, czyli ponad 70%. Zawsze warto zapoznać się z aktualnymi wynikami tej firmy – dostępnymi za darmo na ich stronie internetowej Ranking. Możemy dowiedzieć się także innych ciekawych informacji np. jakie przeglądarki internetowe są najczęściej zainstalowane w naszych domach i z których ludzie w Polsce korzystają. Dodatkowo jaka wersja pluginu Flasha jest wykorzystywana najczęściej.

Przy tworzeniu szablonu w Photoshopie należy pamiętać, że pewne elementy strony nie posiadają stałych rozmiarów – są zależne np. od ilości tekstu znajdującego się w zakładce. Dodatkowo trzeba zauważyć, że komputery przenośne coraz częściej budowane są z matrycą panoramiczną (szerszą, ale niższą), dlatego też jako tło dla elementu <body> najelastyczniej projektować elementy graficzne, którym możemy ustawić styl repeat w css lub jako tło dać kolor lub pattern lub pominąć stosowanie elementów obwodowych (ramek).

Pewne elementy możemy wyodrębnić. Są to elementy:

– nawigacyjne (menu);

– stałe (nie zmieniają rozmiaru w trakcie wyświetlania strony) np. bannery;

– zmienne (zmieniają rozmiar) np. graficzne ramki wokół tekstu;

Chciałbym skupić się na elementach nawigacji, ponieważ przy projektowaniu wyglądu strony internetowej, grafika może być podpinana pod CMS. Jeżeli tak należy się zastanowić nad takim projektowanie nawigacji, które pozwoli dodawania podstron, stron przez użytkownika w czasie użytkowania i rozwoju strony internetowej. Rozwiązaniem tego jest zaprojektowanie przycisków nawigacji, w których tło jest wykonane w programie graficznym i może się zmieniać np. po najechaniu, natomiast nazwa podstrony – tekst który jest wyświetlany w menu na tle opisujemy tylko i wyłącznie przez css i html(ustalamy czcionkę itp.). Tutaj mamy gotową stronę z szablonu powyżej – http://www.mozaika.gniezno.pl. Jak widać po konsultacjach z Klientem wygląd nabrał zupełnie innych kolorów.

Kolejna część artykułu – Projekt graficzny w photoshop’ie

Wydaje mi się, że na ten temat można by napisać całą książkę nie wątpliwie artykuł ten jest tylko drogowskazem dla tych, którzy rozpoczynają swoją pracę w tym kierunku. Będę sukcesywnie go rozbudowywał. W przypadku pytań, sugestii lub chęci napisania czegoś ciekawego proszę o kontakt matrus2@wp.pl.

Pozdrawiam

mtu

Strona została znaleziona przez następujące słowa kluczowe

  • photoshop strona internetowa
  • strona internetowa w photoshopie

, ,

Zostaw komentarz

Szukasz i nie możesz znaleźć?

Użyj formularza poniżej, aby znaleźć żądane informacje:

Jeżeli interesuje Ciebie jakiś temat lub chciałbyś go zobaczyć na tym serwisie skontaktuj się z administratorem.

Blogroll

Polecane strony: