Dodavanje slike vašoj web stranici može se u početku činiti gotovo čarobnim jer je proces s Dreamweaverom tako jednostavan. Izazov s web grafikom nije njihovo dodavanje na vaše stranice, već stvaranje lijepih slika koje se brzo učitavaju u pregledniku vašeg gledatelja.
Potreban vam je drugi program, kao što je Photoshop, Photoshop Elements ili Fireworks, za stvaranje, pretvaranje, uređivanje i optimizaciju slika. Optimiziranje slika smanjuje veličinu datoteka pa se vaše slike preuzimaju brže. Dreamweaver nudi neke osnovne alate za uređivanje slika, ali uglavnom koristite Dreamweaver za umetanje i postavljanje slika na svoju stranicu.
Dreamweaver olakšava postavljanje slika na vaše web stranice i nudi više načina za to:
Kliknite ikonu Slike na ploči Common Insert, a zatim odaberite sliku pomoću dijaloškog okvira Umetanje slike.
Na ploči Datoteke kliknite i povucite naziv slike na stranicu na kojoj želite da se slika pojavi.
Koristite izbornik Umetanje.
Ako nemate pri ruci JPEG, GIF ili PNG sliku optimiziranu za web, možete preuzeti besplatne slike koje su već optimizirane.
Za postavljanje slike na web stranicu pomoću izbornika Umetanje, slijedite ove upute:
Otvorite postojeću stranicu ili stvorite i spremite novu stranicu.
Postavite pokazivač na mjesto gdje želite umetnuti sliku na stranici.
Slike možete umetnuti u gornji lijevi dio nove prazne datoteke, a možete umetnuti slike
oznake i elemente na web-stranici, ali ne možete jednostavno postaviti sliku u sredinu stranice bez korištenja dodatnih HTML oznaka ili CSS formatiranja da biste je pozicionirali.
Odaberite Umetanje→Slika→Slika.
Pojavljuje se dijaloški okvir Odabir izvora slike.
Pregledajte da biste pronašli sliku koju želite umetnuti.
Ovisno o vašem računalnom sustavu, možete pregledavati slike dok ih umetate na različite načine. Evo tri uobičajene opcije:
Na računalu sa sustavom Windows XP, odaberite Thumbnails s padajućeg popisa izbornika Prikaz desno od polja Look In da biste prikazali inačice minijatura svih slika u bilo kojoj otvorenoj mapi. Također možete vidjeti jedan pregled bilo koje odabrane slike u krajnjem desnom dijelu dijaloškog okvira.
Na računalu sa sustavom Windows Vista ili Windows 7 , odaberite opciju ikone (male ikone, srednje ikone, velike ikone ili ekstra velike ikone) s padajućeg popisa izbornika Prikaz desno od polja Look In da biste prikazali minijaturne verzije sve slike u bilo kojoj otvorenoj mapi. Također možete vidjeti jedan pregled bilo koje odabrane slike krajnje desno od dijaloškog okvira.
Na Macu odaberite opciju Prikaži kao stupce u gornjem lijevom kutu dijaloškog okvira. Možete vidjeti jedan pregled bilo koje odabrane slike u krajnjem desnom dijelu dijaloškog okvira.
Zasluge: Fotografije Casey Stoll
Da biste umetnuli sliku, dvaput kliknite naziv slike ili kliknite jednom, a zatim kliknite U redu.
Ako umetnete sliku na stranicu, a slika nije spremljena u vašu lokalnu mapu web-mjesta, Dreamweaver će od vas zatražiti dijaloški okvir upozorenja i ponuditi da kopirate sliku u mapu vaše lokalne stranice. Mnogi dizajneri stvaraju podmapu pod nazivom slike unutar mape lokalnog web-mjesta u koju pohranjuju sve slike na svojoj web-lokaciji, ali možete organizirati slike u više podmapa ako želite.
Odaberite sliku na svojoj web stranici za pregled i uređivanje svojstava slike.
Opcije slike automatski se prikazuju u Inspektoru svojstava na dnu stranice kada je slika odabrana.
Zasluge: Fotografija Caseyja Stolla
Kada umetnete slikovnu datoteku na stranicu, zapravo ne dodajete kopiju slike na stranicu; stvarate referencu na sliku. Osnovni kod izgleda kao kod za vezu s jedne stranice na drugu.
I reference na slike i veze uključuju naziv datoteke i put od stranice do te datoteke. U suštini, stvarate uputu za web preglednik da pronađe sliku kada prikaže stranicu.
Da biste prikazali sliku na svojoj web stranici, morate prenijeti i stranicu i sliku kada objavite svoju web stranicu. Ako vaše slikovne datoteke i stranice koje se odnose na te datoteke nisu na istom relativnom mjestu na vašem tvrdom disku kao na vašem web-poslužitelju, prekinut ćete referencu na svoje slike i na vašoj će se stranici pojaviti ružna ikona Broken Image .
Najbolji način da osigurate da vaše slike i datoteke ostanu na mjestu gdje bi trebale biti jedna u odnosu na drugu jest dopustiti Dreamweaveru da ih prati umjesto vas. Zato je toliko važno dovršiti postupak postavljanja web-mjesta i paziti da nikada ne premještate ili preimenujete sliku, osim na ploči Datoteke.
Šum na slikama sastoji se od bilo kakve zrnatosti ili teksture koja se javlja. Filtri šuma, kao što je dodatak za Photoshop CS6 Add Noise, proizvode nasumične teksture i zrnatost na slici.
Saznajte kako koristiti Adobe Illustrator CC za izradu neobičnih oblika teksta. Uzmite u obzir nove tehnike za prilagodbu teksta u različitim oblicima.
Naučite kako uvesti fotografije koje se već nalaze na vašem tvrdom disku, kao i nove fotografije iz memorijskih kartica u Adobe Lightroom Classic.
Jednostavan i praktičan način za stvaranje redaka i stupaca teksta pomoću opcija vrste područja u Adobe Creative Suite (Adobe CS5) Illustrator. Ova značajka omogućuje fleksibilno oblikovanje teksta.
Otkrijte kako očistiti crtano skeniranje u Adobe Photoshop CS6 koristeći npr. Threshold alat. Uklonite pozadinske boje i artefakte za savršene crno-bijele slike.
Kada uređujete fotografije i portrete u Photoshopu CC, ispravite efekt crvenih očiju s lakoćom. Ovaj vodič pruža korak po korak upute za učinkovito korištenje alata za ispravanje crvenih očiju.
Otkrijte kako spremiti svoj Adobe Illustrator CS6 dokument u PDF format sa detaljnim koracima i savjetima. Sačuvajte svoje radove i olakšajte dijeljenje s drugima uz PDF format.
Rješavanje rezolucije slike u Photoshopu je ključno za kvalitetu ispisa. U ovom članku pružamo korisne informacije o promjeni razlučivosti slike i savjetima za optimizaciju.
Naučite kako primijeniti transparentnost na SVG grafiku u Illustratoru. Istražite kako ispisati SVG-ove s prozirnom pozadinom i primijeniti efekte transparentnosti.
Nakon što uvezete svoje slike u Adobe XD, nemate veliku kontrolu nad uređivanjem, ali možete mijenjati veličinu i rotirati slike baš kao i bilo koji drugi oblik. Također možete jednostavno zaokružiti kutove uvezene slike pomoću kutnih widgeta. Maskiranje vaših slika Definiranjem zatvorenog oblika […]
