4 lutego 2013

Grafika - co, gdzie, jak.

Witam, witam moje skarbeńki wy ♥
Oto pierwsza część z 10 bodajże, w których będę krok po kroku opisywać grafikę html

---
W pierwszej części, prezentacje jednoramkowe z html'em. Są to zwykłe zdjęcia i ramki, w których można do woli umieszczać swój tekst. Oczywiście nie można tego zrobić od tak po prostu z samą grafiką. Jak już się zrobi grafikę, można się zabrać za ten właśnie kod. Moja grafika na prez. jednoramkową wygląda tak:

Po kliknięciu będzie większe :3
Teraz będzie o wiele łatwiejsza czynność, czyli wypełnianie gotowego kodu html.
Aby mieć html, możecie po prostu wypełnić ten, już gotowy kod:

<div style="background-image:url(link do obrazka); width: 948; height: [wysokość obrazka w pixelach]px; overflow: auto; margin-top: 0px; margin-left: 0px;">

<div style="width: [szerokość ramki w pixelach]px; height: [wysokość ramki w pixelach]px; color: rgb(0, 0, 0); overflow: auto; margin-top: [odległość ramki od górnej krawędzi obrazka w pixelach ]px; margin-left: [odległość ramki od lewej krawędzi obrazka w pixelach]px;"><font style="color: rgb(zapis koloru tekstu w palecie rgb);" size="1"><font size="1"><span style="font-family: [nazwa czcionki];"><font style="text-shadow: 0px 0px 1px rgb (zakodowanie koloru);"><center>TEKST<center></font>

A teraz opiszę trochę ten html. Link do obrazka uzupełniamy linkiem, który otrzymaliśmy po zalinkowaniu np. na tinypic.com. Jeśli linkujemy tam, kopiujemy link na końcu tej listy linków xD Wysokość obrazka w pikselach, po prostu sprawdzamy wysokość i tak samo z szerokością. Szerokość ramki.. tu musimy wejść w program graficzny, gdzie robiliśmy grafikę, w moim przypadku jest to Gimp 2.6 i zaznaczeniem prostokątnym zaznaczamy ramkę, jaką chcemy przeznaczyć na tekst i sprawdzamy jakie są jej wymiary. Wpisujemy je w okienka szerokości i wysokości ramki. Potem odległość od górnej krawędzi i od lewej... jak mamy już zaznaczoną ramkę to drugim zaznaczeniem prostokątnym od krawędzi ramki sprawdzamy ile jest do samej góry obrazka, a potem do lewej strony i wpisujemy w okienka. Zapis koloru tekstu w palecie rgb.. tutaj jest baleta i jeden kolor wybrany wpisujemy w okienko. Będzie to nasz kolor tekstu.


Następnie czcionka.. ja zwykle wybieram Verdana lub Century Gothic, ale to jak wy chcecie. Zakodowanie koloru to np. kolor biały lub czarny wpisany tak:

Biały - 255,255,255
Czarny - 0,0,0

I ostatnie, czyli tekst, tu już wpisujecie co chcecie i wklejacie kod np. na prezentację na Howrse :3
Mam nadzieję, że pomogłam i zapraszam za tydzień na kolejny pordnik.
Pozdrawiam!

8 komentarzy:

  1. Szczerze? Kiedy na Howrse zmieniło się to wszystko, już nie mam prezentacji HTML. Mam zwykłą. Nie ogarniam tych kodów i tego wszystkiego, więc nigdy się do tego nie zabiorę, a chciałabym :(

    OdpowiedzUsuń
  2. A czemu jak się zmieniło, nie chciałaś już robić?

    OdpowiedzUsuń
  3. Nie rozumiałam tych kodów i tego wszystkiego... Teraz trzeba jakieś kody, wysokości, szerokości a kiedyś wystarczył jeden kod i już.

    OdpowiedzUsuń
  4. Heheh, Polcia. :D Są trudne kody HTML i CSS. HTML uczę się już 2 lata i dobrze znam, a CSS już rok...

    OdpowiedzUsuń
  5. Hehe, Alinnka - serio? Długo się uczysz xD Chcesz być graficzką w przyszłości? Lub informatyczką xd

    OdpowiedzUsuń