Futrzak

Mój futrzak jest wykonany w Adobe PhotoShop 7.0 CE 

Jest to program płatny, ale bardzo podobny do Gimpa, który jest za darmo.
Program PhotoShop można ściągnąć jako program tymczasowy np. na 30 dni i wtedy jest on bezpłatny, ale kończy się po upływie tego okresu.

Ruchomy awatar w PhotoScape

Pokażę jak zrobić avatar z loginem który zmienia kolor. Avatar wykonałam w programie PhotoScape.

Prezentacja z przezroczystą ramką

Na pewno się zastanawiałeś dlaczego na profilach innych graczy na prezentacji w ramkach są paski np. :

Więc pokaże wam jak zrobić taką ramkę na przykładzie mojej prezentacji z howrse.

Krok 1

Musimy skądś mieć te paski no więc o to i one: KLIK.  Zapisujemy je na pulpicie.

Krok 2

Ramkę robiłam osobno. Więc wchodzimy w gimpa i dalej Plik>Otwórz>wybieramy paski.

 Paski powinny nam się pojawić na przeźroczystym tle.

Krok 3

Następnie musimy trochę zmniejszyć paski więc klikamy:

Ja wybrałam rozmiar 750X800 px ale rozmiar może być dowolny bo potem będziemy mogli ramkę dowolnie zmniejszyć lub zwiększyć.

Krok 4

Po zmniejszeniu musimy przeciągnąć paski na środek.

Krok 5 

Następnie wybieramy zaznaczenie prostokątne i zaznaczamy cały obszar powierzchni pasków.

Krok 6

Potem klikamy PPM [Prawym Przyciskiem Myszki] i wchodzimy Edycja>rysuj wzdłuż zaznaczenia następnie znowu PPM i Filtry>światło i cień> rzucanie cienia  Pamiętaj żeby krycie było na 100 %.

No więc mamy już gotową ramkę teraz wejdź w Plik>Wyeksportuj.

Tak wygląda moja ramka:

Gdy mamy gotową ramkę możemy robić prezentacje dalej.

Krok. 1

Otwórz obrazek w gimpie.

Krok2

Teraz możemy dodać ramkę wejdź w Plik>Otwórz jako warstwę> I wybierz ramkę którą zrobiłeś.

Ramka może się pojawić za duża więc należy ją zmniejszyć:

Możesz też przesunąć ramkę:

To koniec wiadomo można dodać tekst czy coś innego ostatecznie moja prezentacja wygląda tak:

Pozdrawiam milka2012 

Prezentacja w gimpie #3

Krok 1 

Wybieramy sobie jakiś obrazek i otwieramy gimpa następnie bierzemy narzędzie " Zaznaczanie prostokątne " i zaznaczamy obszar w którym chcemy aby była nasza ramka 

KLIKNIJ NA OBRAZ ABY GO POWIĘKSZYĆ

Prezentacja w gimpie #2

Zrobiłam kolejny styl prezentacji.
Jest to bardzo prosty sposób na zrobienie prezentacji.
Mam nadzieje, że będzie on przydatny.

Prezentacja w gimpie

1.Klikamy Plik>Otwórz

2.Następnie klikamy zaznaczenie prostokątne

3.Robimy to co na obrazku 

4.Potem klikamy PPM (Prawy Przycisk Myszy) Edycja>Rysuj w zdłuż zaznaczenia

5.Znowu klikamy PPM>Edycja>Flirtr>Światło i Cień>Rzucanie cienia

6.Wyszło nam takie coś

 Jeślij ktoś ma taki obrazek, że nic nie widać to robimy dalej

                                   
7.Wypełniamy kubełkiem

8.Klikamy kilka razy na kubełek i wychodzi nam takie coś

Krycie dajemy na ok.60

9.Kubełkiem klikamy na ramkę i mamy takie coś

10.Podpisujemy się na prezentacji i potem hostujemy
http://tinypic.com/

Prezentacja w PhotoScape

Jak zrobić swoją oryginalną prezentację/avatar ?

Potrzebny jest do tego program PhotoScape. Teraz pokażę jak można zrobić na swój sposób prezentację, ale avatar też można w taki sposób zrobić :) Robienie takiej prezentacji to może być dobra zabawa. :))

Nagłówek

Witajcie!

Nie dawno opublikowałam posta w którym pytałam się czy chcecie poradnik jak stworzyć taki nagłówek.

Dodatek graficzny #3

Graficzny dodatek nr.7 : Stamp
by Hindustani

                                                         

Dawno nic nie robiłam, więc czas to zmienić C:
Widzicie czasami na profilach małe obrazki a la znaczki pocztowe? Ma to swoją nazwę - stamp. Jest ich bardzo dużo, zwłaszcza na dA, ale czasem nie ma tego, czego byśmy sobie życzyli. Ten poradnik przedstawi Wam, jak zrobić własny stamp.

Potrzebne programy: PhotoScape lub GIMP (ja zrobię w tym pierwszym :>), obramowanie do stampu [klik]).

Krok 1
Otwieramy obrazek, który ma pojawić się w stampie. Do podanego przeze mnie szablonu, należy przerobić obrazek na wymiary 93x49. Jeżeli gdzieś jest za duży, należy go zmniejszyć poprzez kadrowanie.

Krok 2
Zapisujemy obrazek (dobrze jeśli będzie w formacie png.) i otwieramy nasz szablon. Zapisany obrazek możemy obramować w programie photo filtre studio. Ja to zrobię ponieważ jest ładniejszy efekt ;)

Krok 3
Za pomocą warstw, wklejamy obrazek (ten o wymiarach 93x49) w środek stampu. Klikamy "Zdjęcie + obiekt" i zapisujemy cały obrazek w formacie png.

Oto efekt końcowy:

 W razie pytań pisać do Hindustani. Mogę również pomóc zrobić stampa z migającym napisem ;)

Dodatek graficzny#2 - gify z filmów

Czasami na profilach graczy pojawiają się ruchome zdjęcia np. z ulubionego filmu. Dostałam ostatnio na pw pytanie, jak zrobiłam swoje. Wyjaśnię je więc wszystkim. Niestety, ale nie mam już PhotoShopa przez co muszę to robić dłużej i efekt jest nieco brzydszy oraz nie można dodać "efektów" do naszego gifa.

Dodatek graficzny #1

Potrzebne programy: Photo Filtre Studio (ja mam wersję 7) i PhotoScape. Można zrobić też w gimpie, ale ja osobiście nie lubię pisać w tym programie.

Krok 1
Otwieramy program PhotoScape (edytor) i tworzymy nowy obrazek (menu -> nowe zdjęcie). Ja zrobiłam 690x87, jeżeli będzie za duży np. w długości, pod koniec będzie można go podciąć.

Krok 2
Tak stworzony obrazek zapisujemy w formacie png (zapisz -> zapisz jako -> png). Gdy już to zrobimy, zamykamy program i otwieramy Photo Filtre Studio, aby pozbyć się z obrazka tego szarego tła.

Krok 3
Po otwarciu PFS otwieramy nasz obrazek i klikamy na gumkę (krycie musi być zaznaczone na 100%). Następnie "ścieramy" szare tło i powinna nam powstać à la szachownica (jak na obrazku).

Krok 4
Gdy już zetrzemy wszystko, zapisujemy nasz obrazek (wciąż w formacie png!) i ponownie otwieramy nasza pracę w PS. Następnie piszemy na obrazku jakiś tekst (ja użyłam czcionek talking to the moon i learning curve dashed, czcionki można pobierać za darmo ze strony dafont.com). Teraz, jeśli Nasz obrazek jest za długi bądź za szeroki, za pomocą kadrowania możemy go sobie przyciąć.

Krok 5
To już koniec. Wystarczy tylko zapisać obrazek w formacie png. i cieszymy się naszą pracką. Oto końcowy efekt:

Banner #4

Super poradnik na piękny baner  

                                 by Hindustani           

                                                   

Poradnik na życzenie naszej Martyna513 ;3 No więc zrobiłam banerek na bloga z poradnikiem i wysłałam naszej założycielce. Spodobał się jej i zaproponowała, abym zrobiła poradnik. I oto on.

Potrzebny program: Gimp [+ jakiś niewielki obrazek wymiarów 100x100 - taka wielkość nie jest obowiązkowa. Mój będzie taki: klik]

Krok 1
Otwieramy gimpa i tworzymy nowy, przezroczysty obrazek (Plik -> Nowy). Ja na razie daję wymiary 450x450, potem przytnę.

Krok 2
Zaznaczamy fragment naszego zdjęcia, ale zostawiamy nieco więcej miejsca po prawej stronie. Za pomocą narzędzi tekstu (duża litera A) tworzymy nasz tekst (moja czcionka zwie się Englantine [klik]). Teraz wykonujemy krok po kroku rzeczy z tego poradnika (numer 1) do kroku szóstego włącznie. Jest tam również wyjaśnione jak stworzyć tekst w gimpie.




Krok 3
Gdy już utworzymy nasz tekst, klikamy PPM -> Plik -> Otwórz jako warstwy i wklejamy nasz niewielki obrazek [ten o wymiarach 100x100]. Następnie klikamy na przesunięcie, i umieszczamy obrazek w miejscu, które nas interesuje.

Krok 4
W okienku warstw chwytamy tą z naszym obrazkiem i umieszczamy ją nad warstwą o nazwie "tło" (będzie druga od końca). Baner skończony. Ja jednak nieco go ulepszę i obrócę sobie obrazek, żeby bardziej wpasował się w napis. Aby to osiągnąć przesuwamy w oknie głównym kursor myszki na nasz obrazek, klikamy PPM -> Warstwa -> Przekształcenie -> Dowolny obrót. Obracamy nasz obrazek tak jak nam pasuje. Możemy za pomocą chwytaka jeszcze bardziej wpasować obrazek w napis.

Krok 5
Zapisujemy nasz obrazek w formacie png (Plik -> Wyeksportuj -> Zaznaczamy rozszerzenie png). W PhotoScape [lub nawet gimpie] możemy sobie przyciąć obrazek. I otrzymujemy następujący efekt:

W razie pytań, jak zwykle możecie pisać do mnie na pw. Dla przypomnienia, mój login na howrse to Hindustani.

Elegancka prezentacja

Cześć. Mam dla was dzisiaj mały, skromny poradniczek. Mam nadzieję, że spodoba wam się taki sposób robienia prezentacji. Poradnik jest przeznaczony dla dość zaawansowanych grafików, więc jeśli czegoś nie rozumiecie przejrzyjcie inne poradniki na blogu, lub zapytajcie w komentarzach. Postaram się pomóc.

 Zaczynamy od odpowiedniego przycięcia obrazka. Ja polecam 900px x 600px Zazwyczaj używam właśnie takiego rozmiaru tła.

 Wybieramy ten "rozmazany" pędzel i ustawiamy go na rozmiar ponad 200. Dzięki naszej prostej operacji

będziemy mieć doskonały podkład pod ramkę.

 Następnym krokiem jest ustawienie nieco ciemniejszego koloru pędzla i wybranie tego szablonu co na screenie powyżej.

 Teraz pojedynczymi kliknięciami. W efekcie otrzymamy ładną teksturkę.

 Następnie zmieniamy kolor pędzla na czarny i zaznaczamy linię naszej ramki. Klikamy Edycja / rysuj wzdłuż zaznaczenia. Wybieramy grubość linii, która nam odpowiada.

 

 Teraz tym samym pędzlem, którym tworzyliśmy tło usuwamy część ramki w miejscu, w którym chcecie, by znajdował się login.

 Możemy wypełnić ramkę paskami, rozjaśnić je i przyciemnić. Oprócz tego wpisujemy login dowolną czcionką i dokonujemy kosmetycznych poprawek.

Efekt powinien wyglądać podobnie. Zabraniam kopiowania gotowej prezentacji lub przerabiania jej. Liczę, że udało wam się stworzyć równie ładną, lub i lepszą prezentacje :) Przy okazji przepraszam wszystkich, ale nie będę mogła zbyt czynnie uczestniczyć w życiu bloga. Poza tym pokażcie swoje prezentacje! Linki wysyłajcie w komentarzach.

#1 Jednoramkowe prezentacje HTML - krok po kroku

Wprowadzenie

Dzisiaj spróbuję pomóc tym, którzy uważają, że HTML to najczarniejsza magia. Też tak myślałam i stwierdzałam, że to nie dla mnie. Dopiero jak nieco się w to zagłębiłam, przekonałam się, że to naprawdę banalne. 

Od czego zaczynamy?

Nie ma prezentacji bez grafiki. Wykonujemy ją w Gimpie/fotoszopie/PhotoScape - jak kto woli. Moja grafika wygląda tak:

Fantastycznie. Mamy swój wymarzony obrazek, więc czas zabrać się za kod. Niewypełnione kody wyglądają tak:

Kod na grafikę:

<div style="background-image:url(link do obrazka); width: {szerokość obrazka}px; height: {wysokość obrazka}px; overflow: auto; margin-top: 0px; margin-left: 0px;">

Kod na ramkę:

<div style="width: {szerokość ramki}px; height: {wysokość ramki}px; color: rgb(0, 0, 0); overflow: auto; margin-top: {odległość naszej ramki od górnej krawędzi grafiki}px; margin-left: {odległość ramki od lewej krawędzi grafiki}px;"><font style="color: rgb(kod koloru w RGB);" size="{wyjściowy rozmiar to 1, ale możemy zmieniać według upodobań}"><font size="{wyjściowy rozmiar to to 1, ale możemy zmieniać według upodobań}"><p style="text-shadow: 2px 2px 2px #000000;"> <span style="font-family: {nazwa czcionki, którą chcemy mieć};">TEKST</div> </div>

Jak wypełnić?

Kod na grafikę

Link - przesyłamy obrazek na tinypic.pl lub inną dowolną stronę tego typu i kopiujemy jego link

Szerokość i wysokość obrazka - wchodzimy w 'właściwości' obrazka i tam mamy wszystko ładnie wypisane

Kod na ramkę

Wymiary ramki i odległość od krawędzi - otwieramy nasz obrazek w gimpie i zaznaczamy pole, w którym chcemy mieć ramkę. Po lewej stronie wszystko mamy wypisane. Wystarczy przepisać dane do kodu. 

Bierzemy na logikę, która liczba jest odległością od góry, a która od lewej. W przypadku tej grafiki logiczne jest, że większa wartość będzie oznaczała odległość od góry, a mniejsza - odległość od lewej.

Kod koloru w RGB - Wikipedia pomoże. :D Wystarczy skopiować kod znajdujący się w kolumnie 'Hex' do nawiasu, pamiętając o drabince (#) 

Rozmiar - nic prostszego. Zaczynamy od 1, a gdy po wklejeniu kodu tekst jest za mały, wpisujemy 2, 3 itd.

Cień pod tekstem - to fragment zaznaczony na czerwono. Możemy zmieniać tam wartość pixeli (rozmieszczenie cienia) oraz jego kolor, tak, jak zmienialiśmy kolor czcionki. (#000000 oznacza kolor czarny) A jeśli ktoś nie chce cienia, wystarczy usunąć ten fragment. 

Czcionka - Tutaj pełna dowolność, jednak przy wyborze czcionki warto pamiętać, by miała polskie znaki. Czcionek możecie sobie poszukać chociażby w Wordzie. 

I na koniec - usuwamy wszystkie nawiasy z dzióbkami {}

Co dalej, gdy już to zrobimy? Wklejamy gotowy kod i cieszymy się naszą prezentacją. :)))

I co? Było aż tak źle?

Mam nadzieję, że pomogłam Wam zagłębić się w tajniki HTML'u. Jeśli macie jakieś pytania, coś Wam nie działa to piszcie w komentarzach. Z chęcią pomogę rozwiązać problem. :}

A jeśli macie jeszcze jakieś pomysły na poradniki, też piszcie. 

Pozdrowionka!

~Misia (chomik11nobl)