-
data publikacji: 06.04.2009
Prosty design dla fotografa
kategoria: Webdesign autor: sylwus
XXI wiek to przede wszystkim technika. Obserwujemy na rynku rozwój wielu urządzeń ułatwiających i urozmaicających nasze życie. Ich prostota w użytkowaniu sprawia, że już od najmłodszych lat możemy ją w pełni wykorzystać. Aparaty cyfrowe są właśnie jednym z takim urządzeń, więc robienie zdjęć nie jest już dla nikogo żadnym zaskoczeniem. W poniższym artykule chce przedstawić prosty projekt strony, gdzie każdy fotograf może prezentować swoje zdjęcia.
WSKAZÓWKA DLA POCZĄTKUJĄCYCH! Każdy element zamieszczaj na nowej warstwie! (Ctrl + Shift+ N).
Tło
1) Kluczowy element każdej strony. Wybieramy z palety kolorów, kolor czarny i ‘zalewamy’ nim nasz obszar roboczy. Duplikujemy ową warstwę, z paska zadań wybieramy Filter -> Artistic -> Film Grain (Grain : 1, Highlight Area : 0, Intensity 10). Otrzymaliśmy efekt ziarnistości.
Przezroczystość warstwy zmieniamy na 70% (Layer -> Layer Style -> Blending Options -> Opacity : 70%)
2) Aby stworzyć białą ‘flarę’ w góry strony wybieramy z przybornika Gradient Tool (G), ustawiamy Radial Gradient biało-przezroczysty i tworzymy gradient w wybranym miejscu. Następnie zmieniamy jego przezroczystość na 30%.
Top
1) W tym przypadku napis, czcionka : Myriad Pro, kursywa, sharp, 30 px, Gradient Ovelay (biało-szaro-biały), Drop Shadow (Distance 3 px, Spread 0%, Size 25 px).
2) Można również dodać pasek. W tym celu tworzymy odpowiedni pattern (File -> New-> 8x1 px powiększamy maksymalnie obszar roboczy. Wybieramy ołówek tworzymy kształt :
następnie aby dodać wzór do palety Edit -> Define Pattern). Wracamy do naszego projektu, wybieramy zaznaczenie Single Row Marquee Tool, następnie Paint Bucket Tool, ustawiamy Pattern, i wypełniamy nim zaznaczony obszar.
Ustawiamy warstwę na Ovelay.
O autorze
1) Tworząc portfolio fotograficzne pamiętajmy o tym, że tym samym prezentujemy siebie. Warto więc zamieścić na stronie swoje zdjęcie. Ramkę ustawiamy poprzez : Layer -> Layer Style -> Blending Options -> Stroke (Size : 5 px, Position : Inside, Color : # 363636).
Możemy lekko przekrzywić zdjęcie za pomocą kombinacji klawiszy Ctrl + T.
2) Informacje. Imię i nazwisko : czcionka : Myriad Pro, Sharp, 24 px. Oraz krótka notka : Tahoma, None, 11 px, color : # 464545.
Kontakt
1) Ikony zawarte na stronie wzbogacają ją wizualnie. Tutaj, czarno białe (Ctrl + Shift + U) i czcionka : Fujiyama, Sharp, 18 px, color : # 989898.
Menu
1) Linie. Tworzymy tak samo jak w punkcie topie w punkcie 2. Obracamy o 90 stopni ( Ctrl + T -> Prawy klawisz myszy -> Rotare 90 st CW ).
2)Czcionka e menu : Tahoma, None, 11 px, color : #FFFFFF, interlinia : 24 pt.3) Można również stworzyć niewielkie przejścia koloru. W tym celu zaznaczamy interesujący nas fragment i w ten sam sposób jak w punkcie 1.2 tworzymy gradient.
Zdjęcia
1) Miniaturki. Zmniejszamy zdjęcie do interesujących nas rozmiarów (tutaj : 151x98 px), tworzymy ramkę (patrz o autorze, punkt 1.). Na nowej warstwie tworzymy maleńki czarny prostokącik, zmieniamy jego przezroczystość na 70%. Dodajemy napis : „Kliknij aby powiększyć zdjęcie >>” (Tahoma, None, 10 px). Strzałki „>>” ustawiamy na 50 % szerokości.
Stopka
1) Ważny element każdej strony. Zamykamy cały projekt.
Koniec końców wygląda to następująco:
Sylwia Bartyzel, 2009, www.ForFuture.pl
źródło : zdjęcia pochodzą z serwisu www.sxc.hu -
10 Responses to “Prosty design dla fotografa”
Leave a Reply
Komentarze
Kategorie
Top 10
bal intermobil: Jak stworzyć stronę za pomocą xhtml oraz css
alan27pbll: Query_posts, czyli jak ujarzmić loopa część 1.
alan27pbll: Query_posts, czyli jak ujarzmić loopa część 1.
Michał: Inspirujące strony www: wrzesień 2010
czi: Gravatar, czyli jak mieć globalnego avatara
learn italian online: Query_posts, czyli jak ujarzmić loopa część 1.
hotelpalermo: Jak poprawnie osadzić Flasha w kodzie (X)HTML strony?
Michał: jQuery Cycle
Windscreen: Inspirujące strony www: wrzesień 2010
EMAAR MGF GURGAON: Query_posts, czyli jak ujarzmić loopa część 1.
- CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
- Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
- Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
- Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
- Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
- Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
- Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
- Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
- Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
- Skrypty client-side
- Skrypty server-side
- Tutoriale
- Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
- Wieczór z Open Source
- Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
- Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
- XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.
Najnowsze newsy
Wieczór z Open Source 2010
Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej
Grafart.org i WACOM zapraszają na konkursy!
Witam!
Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej
Zapraszamy na forum graficzne Graffika.pl
Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej
Polecane strony
- No bookmarks avaliable.



































W jaki sposób zrobić te przerywane kreseczki ?? Od paru tygodni staram się to uzyskać
Design przede wszystkim bardzo przejrzysty i jak znajdę trochę więcej wolnego czasu to pobawię się i go sobie wykonam ot tak dla praktyki bo dopiero stawiam pierwsze kroki w PS
może teraz wskazana by była przeróbka tego designu pod wordpress w połączeniu z fajną galerią??
O tworzeniu skór do WP juz było i to na konkretnych przykładach o template tagach i cutom firldsach też – więc po co to samo powtarzac kilka razy, tylko na innym layoucie? Nie widzę sensu. Trzeba po prostu usiąźć i spróbować swoich sił.
z tymi przerywanymi kropeczkami najłatwiej jest się pobawić z myślnikami : d
ja myslalem o gotowcu ;P
No jasne bardzo byśmy się ucieszyli gdyby ktoś dla vivee takiego gotowca przygotował, moze bym nawet skorzystala
…
Prosty i efektowny layout… Bravo!
Mój efekt (tylko, że za pomocą Gimpa):
http://kamilgeneral.deviantart.com/art/Foto-Layout-118623226
[Mile widziane komentarze na stronie DeviantArtu]
Szum dałes troszke zbyt widoczny jak dla mnie, poza tym brakuje gradientów polprzezroczystych – one jednak nadają klimat, poza tym czcionki za wielkie – o ile w nazwie strony jeszcze moze byc o tyle w stopce wielkosc tekstu nie powinna przekraczac 11px, mniejszcza czcionka przydałaby się tez w bocznym menu. Przerywane linie są nieco niekonsekwentne – jezeli na gorze jest linia grubsza to nizej tez powinna byc albo odwrotnie.
A to mój test. Troche inny układ.
PS.
Mam jeszcze pytanie do Sylwus – po co do webdesignu stosujesz pt do fontów a nie px? Ekran monitora zbudowany jest z pikeli i jednostka px lepiej oddaje wielkoc znaków. natomiast pt (punkty) stosuje się w dtp i składzie tektu. I tym sposobem w tutorialu jest byk, bo na screeenie dałaś “pt” a w tekście mówisz o “px”, a jednostki te za nic nie są równoznaczne.