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

  • This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

    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