Artykuły:

  • data publikacji: 06.04.2009

    Prosty design dla fotografa

    kategoria: Webdesign autor: sylwus

    Prosty design dla fotografa

    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.

    Prosty design dla fotografa

    Przezroczystość warstwy zmieniamy na 70% (Layer -> Layer Style -> Blending Options -> Opacity : 70%)

    Prosty design dla fotografa

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

    Prosty design dla fotografa

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

    Prosty design dla fotografa

    Prosty design dla fotografa

    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 :

    Prosty design dla fotografa

    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.

    Prosty design dla fotografa

    Ustawiamy warstwę na Ovelay.

    Prosty design dla fotografa

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

    Prosty design dla fotografa

    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.

    Prosty design dla fotografa

    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.

    Prosty design dla fotografa

    Stopka

    1) Ważny element każdej strony. Zamykamy cały projekt.

    Koniec końców wygląda to następująco:

    Prosty design dla fotografa

    Sylwia Bartyzel, 2009, www.ForFuture.pl
    źródło : zdjęcia pochodzą z serwisu www.sxc.hu

    Udostępnij ten artykuł:
    • Print
    • Digg
    • del.icio.us
    • Facebook
    • Mixx
    • Google Bookmarks
    • Gwar
    • RSS
    • Technorati
    • Twitter
    • Wykop

  • 10 Responses to “Prosty design dla fotografa”

    1. luke205 pisze:

      W jaki sposób zrobić te przerywane kreseczki ?? Od paru tygodni staram się to uzyskać :P

    2. KMO pisze:

      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 :)

    3. gosc pisze:

      może teraz wskazana by była przeróbka tego designu pod wordpress w połączeniu z fajną galerią??

    4. agressiva pisze:

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

    5. karol pisze:

      z tymi przerywanymi kropeczkami najłatwiej jest się pobawić z myślnikami : d

    6. gosc pisze:

      ja myslalem o gotowcu ;P

    7. kamilgeneral pisze:

      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]

    8. agressiva pisze:

      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.

    9. agressiva pisze:

      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.

    Leave a Reply

Komentarze

Kategorie

Top 10

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