Photoshop 101: johdanto web-kehittäjille

Johdanto

Usein, kun työskentelemme web-kehittäjänä, meidän on integroitava mallit. Ne voivat olla Photoshopista tai muusta ohjelmistosta. Tässä artikkelissa tarkastelemme Web-kehittäjien Photoshopin perusteita.

Tämä sisältö kirjoitettiin alun perin DAMDigital London -työpajaa varten.

Adobe Photoshop on rasterigrafiikan muokkausohjelmisto, eli se on ohjelma, jonka avulla käyttäjät voivat luoda ja muokata kuvia.

Se julkaistiin vuonna 1988 ja on kasvanut alan graafisten ohjelmistojen standardiksi.

Voit ladata ilmaisen Photoshop-kokeiluversion Adoben verkkosivustolta.

Työtila

Photoshopin työtila on modulaarinen, joten voit mukauttaa sitä tekemäsi työn mukaan. Jotkut oletustyötilat on jo määritetty Photoshopissa. Tässä artikkelissa käytän sitä Graphic and Web. Siirry tähän työtilaan siirtymällä kohtaan Window/workspace/Graphic and Web.

Katsotaanpa meidän työtila:

  • A - Valikkorivi : Täältä löydät eniten photoshop-vaihtoehtoja.
  • B - Asetuspalkki : Tämä palkki antaa sinulle kaikki vaihtoehdot valitulle työkalulle.
  • C - Työkalupakki : Tämä paneeli sisältää kaikki Photoshopin käytettävissä olevat työkalut. Aiheeseen liittyvät työkalut on ryhmitelty yhteen, ja voit napsauttaa yhtä niistä pitkään nähdäksesi kaikki työkalut.
  • D - Paneelit : Se on alue, jossa sinulla on perus paneelit avata, kuten Layers, Historyja niin edelleen. Avaa paneeli vain siirtymällä sisäänWindow/(Panel that you want to open)

Luo uusi tiedosto

Kun luot uuden tiedoston Photoshopissa, sinun on ensin tiedettävä, mihin väliaineeseen mallia tullaan käyttämään - tarkoitetaanko, käytetäänkö sitä ruudulle (verkko, elokuva tai video) vai tulostettavaksi?

Tähän kysymykseen annettavan vastauksen mukaan sinun on muutettava PPI (pikseliä tuumalla) -arvoa.

Pikseliä tuumalla (PPI) on mitta, jota käytetään tietokoneen näytön tarkkuuden määrittämiseen. Tämä mittari arvioi kuvan / kuvan laadun, jonka tietty tietokone- tai tulostusnäyttölaite pystyy näyttämään. Pikseliä tuumalla kutsutaan myös pikselitiheydeksi. Techopedia

Tulostamiseen tarvitaan yleensä 300PPI, mutta se riippuu itse asiassa tulostimesta ja tulostetun asiakirjan koosta. Sinun tulisi vaihtaa myös väri CMYK: ksi, mutta se riippuu jälleen asiakirjan tulostustavasta. Jos haluat oppia lisää RGB- ja CMYK-väreistä, tutustu tähän artikkeliin.

Näyttöjä ja verkkoa varten tarvitset 72PPI- ja RGB-värejä. Sitten sinun on määritettävä näytön koko. Suosittelen suunnittelua ensin matkapuhelimelle, sitten tabletille ja työpöydälle.

Verkkokehittäjänä sinun ei ehkä tarvitse luoda uutta tiedostoa. Mahdollisuudet ovat, että joudut työskentelemään verkkosuunnittelijoiden tarjoaman suunnittelun kanssa.

Aiomme nyt tarkastella olemassa olevaa .psdmallia ja työskennellä sen kanssa katsomaan Photoshopia.

Voit ladata ja avata tämän PSD-mallin Luis Costalta.

Kerrokset

Yksi Photoshopin ydinominaisuuksista on kerrokset . Tasot ovat kuin pino arkkia, ja voit nähdä läpinäkyvät alueet tai alueet, joissa on pieni opasiteetti (osittain läpinäkyvä).

Voit avata tasopaneelin Window/Layers.

Tämän paneelin ylin kerros sijoitetaan kaikkien muiden alla olevien kerrosten päälle. Tasot voidaan järjestää myös kansioihin. On tärkeää nimetä kerrokset ja kansiot oikein. Se auttaa integraation aikana.

Jokaisen kansion ja kerroksen vieressä on silmäkuvake. Näin voit vaihtaa heidän näkyvyyttään.

PSD-laitteellasi voi olla paljon kerroksia ja asiakirjoja. Yksi tapa löytää taso nopeasti on valita move tool (v). Napsauta hiiren kakkospainikkeella kangasta, josta haluat löytää tasosi. Saat kaikki tasot alueelta, jolla olet napsauttanut hiiren oikealla painikkeella. Napsauttamalla yhtä, se valitsee tämän tason tasopaneelissasi.

Työkalupakki

Photoshopissa on paljon työkaluja. Näytän sinulle muutamia hyödyllisiä, jotka auttavat sinua.

Ensinnäkin, jos asennat vain Photoshop CC 2018: n, sinun on palautettava kaikki työkalut. Joten mene Edit > Toolpalkkiin ja napsauta Palauta oletukset -painiketta.

Näemme joitain hyödyllisimpiä työkaluja, joita käytät mallin integroimiseen:

A - Valintatyökalut

  • Siirrä : Antaa käyttäjän siirtää tason kerroksen ympärille. Kuten näimme aiemmin, sitä voidaan käyttää myös kerroksen löytämiseen, jos napsautat kankaasi hiiren kakkospainikkeella.
  • Suorakulmainen teltta : Tätä työkalua käytetään kankaan alueen valitsemiseen kopioitavaksi ja liitettäväksi, täytettäväksi ja niin edelleen. Sitä voidaan käyttää myös mittaamiseen. Kun valinta on valmis, löydät valitun alueen koon Window/Info. Saatat joutua vaihtamaan oletusyksikköä Photoshopissa Edit/preferences/general/Unit & Rulersja asettamaan sitten yksiköt pikseleiksi.

B - Rajaus- ja viipalointityökalut

  • Rajaa : Tämä työkalu voi… rajata kuvaa? Työkalun asetuksissa (Asetuspalkki) voit asettaa kuvasuhteen, jonka haluat säilyttää.

C - Mittaustyökalut

  • Pipettipisara : Pipettimien avulla voit saada nopeasti väriviitteen suunnittelussa. Napsauta vain haluamaasi väriä. Sitten työkalupakin alaosassa etualan väri muuttuu valituksi väriksi. Jos napsautat etualan väriä, se avaa color picker window. Sieltä saat värisi arvon.
  • Värinäytteenotin : Kun integroit suunnittelusi, sinun on ehkä valittava useita värejä. Aiomme käyttää tietoikkunaa uudelleen Window/Info. Tämän työkalun avulla voimme luoda värinäytteenottimen. Napsauta vain kuvan aluetta, josta haluat saada värit. Saat jokaisen värin tietopaneelista. Voit vaihtaa värityypiksi verkkoyhteyden napsauttamalla numeron alla olevaa pipettikuvaketta.
  • Viivain : auttaa mittaamaan malliasi. Kaikki tiedot näkyvät tietoikkunassasi. Pidä yllä Shiftmittauksen aikana, jotta viivaimesi pysyy suorana. Voit saada myös kulmia.

G - Navigointityökalu

  • Käsi : Tämä työkalu auttaa sinua kiertämään kangasta. Voit käyttää tätä työkalua milloin tahansa pitämällä välilyöntinäppäintä ja vetämällä sitä hiirellä.
  • Zoomaa : Voit lähentää ja loitontaa (voit myös Ctrl+ +tai Ctrl+ -).

Oppaat

Kuten olet ehkä huomannut avatessasi PSD-tiedostoa, mallissamme on vihreitä viivoja. Ne ovat oppaita. Ne ovat pohjimmiltaan auttajia, jotka auttavat sinua rakentamaan tai mittaamaan asioita kankaasi ympärillä.

Voit siirtää olemassa olevia oppaita painikkeella move tool(v).

Voit luoda uusia oppaita avaamalla viivaimen: View/Rulertai Ctrl+ R. Viivain näkyy työtilassa. Sitten viivaimelta voit vetää uuden oppaan kankaalle.

Poista ohjain käyttämällä move tool(v) ja laita ohjain takaisin viivaimeen.

Voit piilottaa ja näyttää kaikki oppaasi käyttämällä vain Ctrl+ Htai siirtymällä kohtaan View/Extras.

Älykkäät esineet

Mitä ovat älykkäät esineet?

Älykkäät objektit ovat tasoja, jotka sisältävät rasteri- tai vektorikuvien kuvatietoja, kuten Photoshop- tai Illustrator-tiedostot. Älykkäät objektit säilyttävät kuvan lähdesisällön kaikilla alkuperäisillä ominaisuuksillaan, minkä ansiosta voit suorittaa tuhoamattoman muokkauksen tasolle. Adobe

Älykkäät objektit voidaan tunnistaa tasoistasi, kun niiden pikkukuvissa on seuraava kuvake:

Älykkäät objektit ovat todella käteviä, jos työskentelet vektorityyppisten kuvien kanssa (SVG, EPS, AI), mutta ne ovat hyödyllisiä myös muiden monimutkaisten rasteritiedostojen kanssa.

Yritetään tuoda älykäs esine PSD: hen. Lataa SVG-tiedosto Flaticonista. Voit tuoda SVG: n kankaalle vetämällä tiedoston kankaaseen. Voimme nyt muokata SVG: tä kuvittajana tai missä tahansa muussa vektoriohjelmistossa kaksoisnapsauttamalla pikkukuvaa tai älykkäitä esineitämme. Muutokset näkyvät PSD: ssä.

Älykkäät esineet voivat kuitenkin tehdä paljon enemmän. Jos haluat oppia lisää niistä, tutustu Photoshopin 10 asiaan, jotka sinun on tiedettävä älykkäistä objekteista.

Vie varat

Ensinnäkin vain muistutus siitä, että photoshop on rasteriohjelmisto , ei vektoriohjelmisto . Tämä tarkoittaa, että SVG-tiedostoja ei voi viedä Photoshopista. Tätä varten sinun on vietävä tällaiset tiedostot esimerkiksi Illustratorista tai Inkscape: stä.

Verkossa haluamme saada kevyitä kuvatiedostoja. Valokuvaukseen käytämme pakattua .jpgtiedostoa. Jos sinun on käytettävä läpinäkyvyyttä (alfa-kanava), käytämme .pngtiedostoa. Animoidussa kuvassa käytämme a .gif. Jos tarvitset vektorikuvan (esimerkiksi kuvakkeet), parasta on viedä tiedosto nimellä .svg. Jos haluat lisätietoja kaikista Photoshopissa olevista tiedostoista, voit tarkistaa "tiedostomuodot" Adoben verkkosivustolta.

Vie kankaamme

Vie kangas seuraavasti:

  1. Mene File/Export/Save for Web
  2. Valitse tiedostomuoto
  3. Valitse kuvan koko
  4. Valitse laatu
  5. Tallentaa

Vie vain sisältökohde kankaasta

Sinun on todennäköisesti vietävä joitain mallisi sisältökohteita.

Viedään tuotekarusellin vasen nuoli:

Siirrytyökalun avulla löydämme kerroksemme. Napsauta hiiren kakkospainikkeella nuolta ja valitse taso Arrow Left. Napsauta hiiren kakkospainikkeella tätä kerrosta tasopaneelissa. Valitse export asja valitse tarvitsemasi tiedostotyyppi.

Voimme viedä myös kansioita.

Toiminnot

Mikä on toiminta Photoshopissa?

Toiminto on sarja tehtäviä, joita toistetaan yhdellä tiedostolla tai tiedostojoukolla - valikkokomennot, paneelin asetukset, työkalutoiminnot ja niin edelleen. Voit esimerkiksi luoda toiminnon, joka muuttaa kuvan kokoa, soveltaa kuvaan tehosteen ja tallentaa tiedoston sitten haluttuun muotoon. Adobe

Tämä ominaisuus on todella kätevä, jos haluat muuttaa erän kuvia verkkoon!

Luodaan uusi toiminto kuvan rajaamiseksi ja tämän viemiseksi:

  1. Lataa joukko kuvia osoitteesta //unsplash.com/
  2. Avaa yksi näistä kuvista
  3. Avaa Actionspaneeli Window/Actions,
  4. Luo uusi toiminto napsauttamalla kuvaketta Luo uusi toiminto (Roskakuvakkeen vasemmalla puolella oleva). Nimeetään tämä toiminto Export for web - asiakkaan nimi.
  5. Tallennamme nyt toimintaamme. Tallennuspainike on punainen, ja voit lopettaa nauhoituksen napsauttamalla pysäytyskuvaketta (neliön kuvake vasemmalla) /
  6. Valitse rajauskuvake ja aseta suhteeksi 1x1 ja rajaa kuva /
  7. Nyt haluamme viedä kuvamme ,, File/Export/Save for Webvalita JPG, laatu 50% ja leveys 500px.
  8. Napsauta Tallenna ja valitse kohdekansio.
  9. Sulje kuva tallentamatta sitä.
  10. Lopeta nauhoitus napsauttamalla pysäytyskuvaketta (neliön kuvake vasemmalla).

Meillä on nyt toimintamme, joten voimme avata kuvan ja vain "pelata" toimintaamme napsauttamalla toistopainiketta.

Jos haluamme soveltaa toimintojamme kuvajoukkoon, noudata näitä ohjeita:

  1. Mene File/Automate/Batch
  2. Valitse Sourcekansio.
  3. Valitse toimintamme
  4. Klikkaa Ok

Ja voilà! Kaikki kuvat ovat vientikansiossa.

Toivottavasti olet nauttinut tästä pienestä Photoshop 101 -esittelystä web-kehittäjille?. Jos haluat version 102, ilmoita minulle, mitä haluat tietää tai lukea lisää?

  • @vince_umo
  • vincent-humeau.com