Kuidas luua veebipõhine pildiraam Photoshopi abil

Reklaam

Saate teha nii palju lahedaid asju Adobe Photoshop on raske teada, kust alustada. Selles artiklis näitame teile, kuidas Photoshopi abil veebipõhist pildiraami luua. Sellist, mida saate kasutada kõigil veebisaitidel ja rakendustes, nii ümbritsedes oma avatari kui ka ajaveebi päises.

1. samm: seadistage oma fail

Enne selle õpetuse alustamist peate teadma kohandatud kuju tööriista põhialuseid. Selleks vaadake meie artiklit kuidas kasutada kohandatud kuju tööriista Photoshopis Kuidas kasutada kohandatud kuju tööriista Adobe PhotoshopisMeie samm-sammuline juhend kohandatud kuju tööriista kasutamiseks Adobe Photoshopis - mitmekülgne tööriist, mida sageli ei arvestata. Loe rohkem .

Järgmisena avage dokumendi seadistamiseks Photoshop. Oletame, et selle õpetuse jaoks on teie loodud pildiraam sotsiaalmeedia avatari. Avatarid on tavaliselt kõigist külgedest võrdsed, sõltumata sellest, kas need on ringikujulised või ruudukujulised.

Seda silmas pidades määrake dokumendi suuruseks vähemalt 1000 × 1000 pikslit, ehkki võite suureneda. Need mõõtmed on juhised teie pildiraamile.

2. samm. Seadistage kohandatud kuju tööriist

Pärast faili seadistamist looge oma kihis uus kiht Kihid paneel - see on koht, kuhu teie raam läheb.

Järgmisena veenduge, et teie Kohandatud kuju tööriist on aktiivne. Seejärel kontrollige oma kohandatud kuju värve jaotises Täida ja Stroke sektsioonid.

Praegu on mul vaikimisi värvipalett aktiivne. Ma ei taha neid värve oma pildiraamil kasutada, seetõttu kavatsen need välja vahetada.

Nende värvide vahetamiseks minge oma saidile Proovipildid paneel. Klõpsake rippmenüü ikooni. Valige Adobe valikute loendist eelmonteeritud palett.

Võite ka laadida kohandatud värvipaleti, kui olete selle juba loonud. Kui te pole seda varem teinud, vaadake meie juhendaja selgitusi kuidas Photoshopis kohandatud värvipaletti luua.

Nüüd, kui uus palett on laaditud, minge tagasi oma juurde Täida ja Stroke oma kohandatud kuju tööriista valikud. Valige värvid, mida soovite kasutada.

Pärast seda minge oma juurde Kuju ja valige kujundus, mis sobib teie pildile kõige paremini.

Selle õpetuse jaoks kerige allapoole, kuni leiate õõnsa ringi ja ruudukujulised kujundid. Valige õõnes ring, mida kasutada pildiraamina, siin näha punaselt.

Kuigi Adobe-l on palju eelraami raame, on need meie eesmärgi jaoks natuke liiga väljamõeldud. See ring peaks triki tegema.

3. samm: joonistage oma kuju

Kui olete oma kuju valinud, klõpsake selle loomiseks ja lohistage kursorit üle lehe.

Kui olete oma pildi kogemata lehelt maha joonistanud - nagu mul on -, ärge muretsege. Võite kasutada ka nuppu Tee valimise tööriist või Teisalda tööriist oma raami keskele. See on siin punasega esile tõstetud.

4. samm: rakendage kihtstiil

Kui olete oma kaadri keskele seadnud, võiksite sellele efekti rakendada, et see näeks välja „3D”.

Selleks minge oma Kiht ja topeltklõpsake kihti, mis sisaldab teie kuju. Hüppab kast, mis ütleb Kihistiil.

All Segamisvalikud, sa näed Kaldus ja reljeef. Selle aktiveerimiseks klõpsake sellel suvandil ja veenduge, et nime kõrval olev ruut on täidetud.

Kui see linnuke on aktiivne, näete, et teie pildiraam on omandanud 3D-kvaliteedi.

All Struktuur Jaotises saate valida, millist tüüpi kaldkonstruktsiooni oma kujule rakendada, kaldus sügavust, suurust ja seda, kui palju soovite selle servi pehmendada.

All Varjutamine, saate oma esiletõstmiste välimust muuta. Saate muuta nurka, mille järgi valgus objektile tabab, ja ka seda, kuidas valgus objektiga suhtleb.

Kui olete kõik seaded rahuldatud, klõpsake nuppu Okei.

5. samm: rasterdage oma kihti

Pärast kaldkatuse lõpuleviimist soovite „raami valiku“ loomiseks valida oma raami. See võimaldab teil hiljem "kuju" välja kutsuda ja hõlpsasti värvilahenduse lisada valitud kuju kujule - lihtsalt teises kihis.

Mõelge sellele nagu otsetee redigeerimisele.

Kui valite oma Võlukepikese tööriist, veenduge, et teie pilt oleks praegu seatud 16 bitti. Kui see pole nii, saate Photoshopilt hoiatuse.

Kui seda pole, klõpsake nuppu Pilt> Režiim> 16 bitti. Kuna töötate erinevates kihtides, küsib Photoshop teilt, kas soovite dokumendi sügavuse vähendamisel neid kihte ühendada.

Klõpsake nuppu Ära liida. Ikka soovite, et need kihid oleksid eraldi.

Pärast pildi sügavuse muutmist peate oma võlukepikese kasutamiseks oma kihti ikkagi rasterdama. See tähendab, et teisendate vektorgraafika pikslipõhiseks.

Oma kihi rasterdamiseks paremklõpsake kihti, mis sisaldab teie pildiraami, ja valige Kihtide stiili rasterdamine.

6. samm: tehke valik

Järgmisena minge tagasi oma juurde Võlukepikese tööriist ja valige tühi koht pildiraami sise- ja välisküljel.

Kui need kaks ala on valitud, paremklõpsake tühjal kohal ja valige Valige Pööra. Photoshop valib selle asemel teie raami kuju.

See võib tunduda keerukas samm, kuid valimiseks on selles järjekorras hea põhjus.

Kui proovite klõpsata otse oma 3D-raami, valib Photoshop ainult täpselt sama väärtuse ja värviga värvid - mitte kogu asja.

Koos Valige Pööra, nüüd on teil oma raami valik puhas.

Selle valiku edasiseks kasutamiseks salvestamiseks minge oma tööala ülaosas olevale menüüribale. Klõpsake nuppu Valige> Salvesta valik.

Pange oma valikule tähenduslik nimi ja klõpsake siis nuppu Okei.

7. samm: kohandage värvi

Nüüd, kui olete loonud veebipõhise pildiraami, võiksite reguleerida selle värvi.

Värvi kohandamiseks minge oma saidile Kihid paneeli ja looge uus kiht selle kihi peale, mis hoiab teie pildiraami. Seejärel klõpsake nuppu Valige> Load Selection.

Alates Kanal ripploendist valige oma pildiraamist valitud valik.

Kui valik on aktiivne, minge üle oma saidile Värvi ämber või Gradient ja rakendage sellele kihile veidi värvi. See jääb selle valiku piiridesse.

Kui olete värvi alla lasknud, soovite, et see töötaks selle all oleva pildiraamiga.

Selleks klõpsake nuppu Segamisrežiim rippmenüü oma Kihid paneel. Valige efekt.

Nagu näete, helendab see efekt mu raami, samal ajal korjates 3D-kaardi kaldpinna heledad ja tumedad toonid alt üles.

8. samm: lisage oma pilt

Kui olete pildiraamiga lõpetanud, peate tõenäoliselt selle sisse paigutama pildi. Selle osa demonstreerimiseks kasutasin enda kohta pilti.

Selle peapildi lisamiseks oma kaadrisse valige Liiguta seejärel klõpsake ja lohistage oma peakomplekt ülaosas oma pildiraami faili vahekaardile. Olen vahekaardi punasega esile tõstnud.

Kui olete päisepildi vahekaardile lohistanud, viib Photoshop selle pildi teie pildiraami tööruumi.

Vabastage fail. Photoshop paigutab peakomplekti automaatselt teie uude kihti Kihid paneel.

Kui see päisekujutis on uues kihis, nihutage see peakaadri kiht oma pildiraami kihi alla. Raam peab olema pealt nähtav.

Vajadusel kohandage peakomplekti, et see paremini teie raamile sobiks Redigeerimine> Vaba teisendus. Lohistage kinnituspunkte sissepoole, et see väiksemaks muutuks.

Järgmisena minge oma pildiraami kihti. Aktiveerige oma Võlukepp ja valige siis oma raami välispinna ümbrus.

Kui teie kaadrist väljaspool olev ala on valitud, minge tagasi oma peakomplekti kihti. Minge ekraani ülaosas olevasse menüüsse ja klõpsake siis nuppu Redigeerimine> Lõika.

See eemaldab ülejäänud pildi kiirelt väljaspool raami, luues selle pildilaadse efekti.

9. samm. Salvestage oma fail veebi

Nüüd, kui pilt on sisestatud ja pildiraam on valmis, olete valmis salvestama.

Enne salvestamist veenduge, et faili taustkiht on välja lülitatud. Teie pildiraam on ümmargune ja selle ümber on teatud läbipaistvus. Kui hoiate seda taustakihti sees, siis see läbipaistvus ei mõjuta.

Kui teie taust on välja lülitatud, minge lehele Fail> Ekspordi> Salvesta veebi jaoks (pärand). Salvestage fail PNG-na. Ja seal see teil on. Olete valmis.

Online-kohaloleku kohandamine

Nüüd, kui teate digitaalse pildiraami loomist, saate seda oma veebis olemise kohandamiseks kasutada, pakkudes teile ühtlast pilgu erinevatele saitidele ja rakendustele.

Ärge siiski lõpetage oma Photoshopi haridust. Soovitame õppida kuidas Photoshopiga kohandatud gradienti luua Kuidas luua kohandatud gradient Photoshop CC abilSelles artiklis tutvustame teile nelja lihtsa sammuna, kuidas Photoshop CC abil kohandatud gradienti luua. Loe rohkem järgmine.