Kuvan lisääminen verkkosivullesi voi aluksi tuntua melkein taianomaiselta, koska prosessi on niin yksinkertainen Dreamweaverilla. Verkkografiikan haasteena ei ole niiden lisääminen sivuillesi, vaan hyvännäköisten kuvien luominen, jotka latautuvat nopeasti katsojan selaimeen.
Tarvitset toisen ohjelman, kuten Photoshopin, Photoshop Elementsin tai Fireworksin, kuvien luomiseen, muuntamiseen, muokkaamiseen ja optimointiin. Kuvien optimointi pienentää tiedostokokoa, joten kuvat latautuvat nopeammin. Dreamweaver tarjoaa joitain peruskuvanmuokkaustyökaluja, mutta enimmäkseen käytät Dreamweaveria kuvien lisäämiseen ja sijoittamiseen sivullesi.
Dreamweaver tekee kuvien sijoittamisesta verkkosivuillesi helppoa ja tarjoaa useita tapoja tehdä se:
Napsauta Kuvat-kuvaketta Common Insert -paneelissa ja valitse sitten kuva Lisää kuva -valintaikkunasta.
Napsauta Tiedostot-paneelissa kuvan nimeä ja vedä se sivulle, jolla haluat kuvan näkyvän.
Käytä Lisää-valikkoa.
Jos sinulla ei ole web-optimoitua JPEG-, GIF- tai PNG-kuvaa käsilläsi, voit ladata ilmaisia kuvia, jotka on jo optimoitu.
Voit sijoittaa kuvan Web-sivulle Lisää-valikon avulla seuraavasti:
Avaa olemassa oleva sivu tai luo ja tallenna uusi sivu.
Aseta kohdistin kohtaan, johon haluat lisätä kuvan sivulla.
Voit lisätä kuvia uuden tyhjän tiedoston vasempaan yläkulmaan ja voit lisätä kuvia siihen
tageja ja elementtejä verkkosivulla, mutta et voi vain sijoittaa kuvaa sivun keskelle ilman ylimääräisiä HTML-tageja tai CSS-muotoilua sen sijoittamiseen.
Valitse Lisää → Kuva → Kuva.
Valitse kuvalähde -valintaikkuna tulee näkyviin.
Selaa löytääksesi kuvan, jonka haluat lisätä.
Tietokonejärjestelmästäsi riippuen voit esikatsella kuvia lisättäessä niitä eri tavoilla. Tässä on kolme yleistä vaihtoehtoa:
Jos käytät Windows XP -tietokonetta, valitse Näytä-valikon avattavasta luettelosta Pikkukuvat Etsi-kentän oikealla puolella näyttääksesi pikkukuvat kaikista avoimessa kansiossa olevista kuvista. Voit myös tarkastella yksittäistä esikatselua mistä tahansa valitusta kuvasta valintaikkunan oikeassa reunassa.
Jos tietokoneessa on Windows Vista tai Windows 7 , valitse kuvakevaihtoehto (pienet kuvakkeet, keskikokoiset kuvakkeet, suuret kuvakkeet tai erittäin suuret kuvakkeet) Näytä-valikon avattavasta luettelosta Look In -kentän oikealla puolella näyttääksesi pikkukuvaversiot kaikki kuvat missä tahansa avoimessa kansiossa. Voit myös tarkastella yksittäistä esikatselua mistä tahansa valitusta kuvasta valintaikkunan oikeassa reunassa.
Valitse Macissa Näytä sarakkeina -vaihtoehto valintaikkunan vasemmasta yläkulmasta. Voit tarkastella yksittäistä esikatselua mistä tahansa valitusta kuvasta valintaikkunan oikeassa reunassa.
Luotto: Kuvat Casey Stoll
Lisää kuva kaksoisnapsauttamalla kuvan nimeä tai napsauttamalla kerran ja napsauttamalla sitten OK.
Jos lisäät kuvan sivulle, mutta kuvaa ei tallenneta paikalliseen sivustokansioosi, Dreamweaver kehottaa sinua näyttämään varoituksen valintaikkunan ja ehdottaa kuvan kopioimista paikalliseen sivustokansioosi. Monet suunnittelijat luovat alikansion nimeltä images paikallisen sivuston kansioon, johon he tallentavat kaikki sivustonsa kuvat, mutta voit halutessasi järjestää kuvat useisiin alikansioihin.
Valitse Web-sivullasi oleva kuva nähdäksesi ja muokataksesi kuvan ominaisuuksia.
Kuvavaihtoehdot näkyvät automaattisesti sivun alareunassa olevassa Property Inspectorissa, kun kuva valitaan.
Luotto: Kuva Casey Stoll
Kun lisäät kuvatiedoston sivulle, et itse lisää kuvan kopiota sivulle. luot viittauksen kuvaan. Taustalla oleva koodi näyttää paljolti sivulta toiselle linkin koodilta.
Sekä kuvaviittaukset että linkit sisältävät tiedoston nimen ja polun sivulta kyseiseen tiedostoon. Pohjimmiltaan luot ohjeet verkkoselaimelle löytääkseen kuvan, kun se näyttää sivun.
Jotta voit näyttää kuvan verkkosivullasi, sinun on ladattava sekä sivu että kuva, kun julkaiset verkkosivustosi. Jos kuvatiedostosi ja niihin viittaavat sivut eivät ole samassa suhteellisessa paikassa kiintolevylläsi kuin verkkopalvelimellasi, rikot viittauksen kuviisi ja sivullesi ilmestyy ruma rikkinäinen kuva -kuvake. .
Paras tapa varmistaa, että kuvasi ja tiedostosi pysyvät siellä missä niiden pitääkin suhteessa toisiinsa, on antaa Dreamweaverin seurata niitä puolestasi. Tästä syystä on erittäin tärkeää suorittaa sivuston asennusprosessi loppuun ja varmistaa, että et koskaan siirrä tai nimeä kuvaa uudelleen, paitsi Tiedostot-paneelissa.
Opi käyttämään läpinäkyvyyttä SVG-grafiikassa Illustratorissa. Tutustu SVG-tiedostojen tulostamiseen läpinäkyvällä taustalla ja läpinäkyvyystehosteiden käyttämiseen.
Kun olet tuonut kuvat Adobe XD:hen, sinulla ei ole paljon muokkaushallintaa, mutta voit muuttaa kuvien kokoa ja kiertää niitä aivan kuten minkä tahansa muun muodon avulla. Voit myös pyöristää tuodun kuvan kulmia helposti kulmawidgetien avulla. Kuvien peittäminen määrittelemällä suljetun muodon […]
Kun Adobe XD -projektissasi on tekstiä, voit alkaa muuttaa tekstin ominaisuuksia. Näitä ominaisuuksia ovat Fonttiperhe, Fonttikoko, Fontin paino, Tasaus, Merkkien väli (välitys ja seuranta), Riviväli (alku), Täyttö, Reuna (viiva), Varjo (pudottava varjo) ja Taustan sumennus. Katsotaanpa, kuinka näitä ominaisuuksia käytetään. Tietoja luettavuudesta ja fontista […]
Aivan kuten Adobe Illustratorissa, Photoshop-piirustustaulut tarjoavat mahdollisuuden luoda erillisiä sivuja tai näyttöjä yhdelle asiakirjalle. Tämä voi olla erityisen hyödyllistä, jos rakennat näyttöjä mobiilisovellukselle tai pienelle esitteelle. Voit ajatella piirustustaulua erityisenä tasoryhmänä, joka on luotu Tasot-paneelin avulla. Sen […]
Monia InDesign Tools -paneelin työkaluja käytetään viivojen ja muotojen piirtämiseen sivulle, joten sinulla on useita eri tapoja luoda mielenkiintoisia piirustuksia julkaisuihisi. Voit luoda InDesignissa mitä tahansa perusmuodoista monimutkaisiin piirustuksiin sen sijaan, että joutuisit käyttämään piirustusohjelmaa, kuten […]
Kun suunnittelet Adobe Illustrator CC:llä, tarvitset usein muodon, jonka koko on tarkka (esimerkiksi 2 x 3 tuumaa). Kun olet luonut muodon, paras tapa muuttaa sen kokoa tarkkoihin mittoihin on käyttää tässä kuvassa näkyvää Transform-paneelia. Valitse objekti ja valitse sitten Ikkuna → Muunna muotoon […]
Tekstin kääriminen Adobe Illustrator CC:ssä ei ole aivan sama asia kuin lahjan kääriminen – se on helpompaa! Tekstin rivitys pakottaa tekstin kiertämään grafiikan ympärille, kuten tässä kuvassa. Tämä ominaisuus voi lisätä luovuutta mihin tahansa kappaleeseen. Grafiikka pakottaa tekstin kiertymään ympärilleen. Luo ensin […]
InDesignilla voit luoda ja muokata QR-koodigrafiikkaa. QR-koodit ovat viivakoodimuoto, johon voidaan tallentaa tietoja, kuten sanoja, numeroita, URL-osoitteita tai muita tietoja. Käyttäjä skannaa QR-koodin kamerallaan ja ohjelmistollaan laitteella, kuten älypuhelimella, ja ohjelmisto hyödyntää […]
Saattaa olla hetkiä, jolloin tarvitset uuden kuvan näyttääksesi vanhalta. Photoshop CS6 tarjoaa sinut. Mustavalkokuvaus on uudempi ilmiö kuin uskotkaan. Dagerrotypioissa ja muissa varhaisissa valokuvissa oli usein ruskehtava tai sinertävä sävy. Voit luoda omia seepiasävyisiä mestariteoksia. Sävytetyt kuvat voivat luoda […]
Adobe Creative Suite 5 (Adobe CS5) Illustratorin Live Paint -ominaisuuden avulla voit luoda haluamasi kuvan ja täyttää alueet väreillä. Live Paint -ämpäri tunnistaa automaattisesti alueet, jotka koostuvat itsenäisistä risteävistä poluista ja täyttää ne vastaavasti. Maali tietyllä alueella pysyy elävänä ja virtaa automaattisesti, jos […]
