Photoshop 101: bevezetés a webfejlesztők számára

Programozás

Bevezetés

Webfejlesztőként gyakran integrálnunk kell sablonokat. Lehetnek a Photoshop vagy más szoftverek. Ebben a cikkben áttekintjük a webfejlesztőknek szánt Photoshop alapjait.

Ez a tartalom eredetileg a DAMDigital London számára szervezett workshop számára készült.

Az Adobe Photoshop egy raszteres grafikus szerkesztő szoftver, vagyis egy olyan program, amely lehetővé teszi a felhasználók számára képek létrehozását és szerkesztését.

1988-ban jelent meg, és a grafikus szoftverek ipari szabványává nőtte ki magát.

A Photoshop ingyenes próbaverzióját letöltheti az Adobe webhelyéről.

Munkaterület

A Photoshop munkaterülete moduláris, így az elvégzett munkától függően módosíthatja. Néhány alapértelmezett munkaterület már be van állítva a Photoshop alkalmazásban. Ebben a cikkben az Graphic and Webegyet használom . Ha erre a munkaterületre szeretne váltani, menjen be Window/workspace/Graphic and Web.

Vessünk egy pillantást a munkaterületünkre:

  • A - Menüsor : Itt található a legtöbb photoshop-lehetőség.
  • B - Beállítási sáv : Ez a sáv megadja az aktuálisan kiválasztott eszköz összes beállítását.
  • C - Eszköztár : Ez a panel a Photoshop összes elérhető eszközét tartalmazza. A kapcsolódó eszközök csoportosítva vannak, és hosszú ideig rákattinthat az egyikre az összes eszköz megtekintéséhez.
  • D - panelek : Ez az a terület, ahol még az alapvető panelek megnyitni, például Layers, Historyés így tovább. A panel megnyitásához egyszerűen lépjen beWindow/(Panel that you want to open)

Hozzon létre egy új fájlt

Amikor új fájlt hoz létre a Photoshop alkalmazásban, először tudnia kell, hogy milyen formátumban fogják használni a rajzot - vagyis képernyőre (web, film vagy videó) vagy nyomtatásra használják?

A kérdésre adott választól függően módosítania kell a PPI (pixel per hüvelyk) értéket.

A pixel per inch (PPI) egy mérés, amelyet a számítógép kijelzőjének felbontásának meghatározására használnak. Ez a mutató értékeli a kép / kép minőségét, amelyet egy adott számítástechnikai vagy kimeneti megjelenítő eszköz képes megjeleníteni. A pixel / hüvelyk pixel sűrűség néven is ismert. Techopedia

A nyomtatáshoz általában 300PPI-ra van szükség, de ez valójában a nyomtatótól és a kinyomtatott dokumentum méretétől függ. Meg kell változtatnia a színét CMYK-ra is, de ez megint attól függ, hogyan nyomtatja ki a dokumentumot. Ha többet szeretne megtudni az RGB és CMYK színekről, olvassa el ezt a cikket.

A képernyőkhöz és az internethez? 72PPI és RGB színre van szükség. Ezután meg kell adnia a képernyő méretét. Azt javaslom, hogy először mobilra, majd táblagépre és asztali számítógépre tervezzen.

Webfejlesztőként nem biztos, hogy új fájlt kell létrehoznia. Esélyes, hogy a webdesignerek által biztosított dizájnnal kell dolgoznia.

Most megnézünk egy meglévő .psdsablont, és együttműködünk vele, hogy körülnézzünk a Photoshopban.

Ezt a PSD-sablont Luis Costa-ról töltheti le és nyithatja meg.

Rétegek

A Photoshop egyik alapvető jellemzője a rétegek . A rétegek olyanok, mint egy halom lap, és átlátszó vagy alacsony opacitású (részben átlátszó) területeket láthat.

Megnyithatja a réteg panelt Window/Layers.

Ennek a panelnek a legfelső rétege az alatta lévő összes többi réteg fölé kerül. A rétegek mappákba is rendezhetők. Fontos a rétegek és mappák helyes elnevezése. Ez segít az integráció során.

Minden mappa és réteg mellett van egy szem ikon. Ez lehetővé teszi a láthatóságuk váltását.

Előfordulhat, hogy a PSD-jén sok réteg és dokumentum található. A réteg gyors megtalálásának egyik módja a move tool (v). Kattintson jobb gombbal azon a vásznon, ahol a fóliát szeretné megtalálni. Megkapja az összes réteget azon a területen, ahol jobb egérgombbal kattintott. Az egyikre kattintva kiválasztja ezt a réteget a réteg paneljén.

Eszköztár

A Photoshop rengeteg eszközzel jár. Mutatok néhány hasznosat, amelyek segítenek?

Először is, ha csak a Photoshop CC 2018 programot telepíti, akkor vissza kell állítania az összes eszközt. Tehát lépjen a Edit > Toolsávba, és kattintson az Alapértékek visszaállítása gombra.

Megtekintjük a sablon integrálásához használt leghasznosabb eszközöket:

A - Kiválasztó eszközök

  • Áthelyezés : Lehetővé teszi a felhasználó számára, hogy egy réteget áthelyezzen a vászon körül. Mint korábban láttuk, ez is felhasználható réteg keresésére, ha jobb gombbal kattint a vásznára.
  • Téglalap alakú sátor : Ezzel az eszközzel kiválasztható a vászon egy része, amelyet másolni és beilleszteni, kitölteni stb. Mérésre is használható. A kiválasztás befejeztével itt találhatja meg a kijelölt terület méretét Window/Info. Lehet, hogy módosítania kell az alapértelmezett egységet a Photoshopban, Edit/preferences/general/Unit & Rulersmajd az egységeket pixelekre kell állítania.

B - Vágó és szeletelő eszközök

  • Vágás : Ez az eszköz ... képes képet vágni? Az eszköz beállításaiban (Opciók sáv) megadhatja a megtartani kívánt képarányt.

C - Mérőeszközök

  • Szemcsepp : A szemcsepp lehetővé teszi, hogy gyorsan színreferenciát kapjon a tervezésében. Csak kattintson a kívánt színre. Ezután az eszköztár alján az előtér színe a kiválasztott színre változik. Ha rákattint az előtér színére, megnyílik a color picker window. Innen megszerezheti a színe értékét.
  • Színmintavevő : A tervezés integrálásakor lehet, hogy több színt kell kiválasztania. Újra használni fogjuk az információs ablakot Window/Info. Ez az eszköz lehetővé teszi számunkra, hogy színmintát készítsünk. Csak kattintson a kép azon területére, amelyről a színeket meg szeretné kapni. Minden színt megkap az információs panelen. A színtípust webre változtathatja, ha rákattint a szám alatt található Szemcsepp ikonra.
  • Vonalzó : segít a sablon mérésében. Az összes információ megjelenik az információs ablakban. Karbantartás Shiftméréskor, így a vonalzója egyenes marad. Szögeket is kaphat.

G - Navigációs eszköz

  • Kéz : Ez az eszköz segít megkerülni a vásznat. Ezt az eszközt bármikor elérheti, ha megtartja a szóközt és az egérrel húzza.
  • Nagyítás : Lehetővé teszi a nagyítást és a kicsinyítést ( Ctrl+ +, vagy Ctrl+ -is).

Útmutatók

Mint észrevehette, amikor megnyitotta a PSD fájlt, a sablonunkon néhány zöld vonal található. Útmutatók. Alapvetően segítők, akik segítenek felépíteni vagy felmérni a vásznad körüli dolgokat.

A meglévő útmutatókat áthelyezheti a move tool(v) segítségével.

Új útmutatók létrehozásához meg kell nyitnia a vonalzót: View/Rulervagy Ctrl+ R. A vonalzó megjelenik a munkaterületén. Ezután a vonalzóból új útmutatót húzhat a vásznára.

A vezető eltávolításához használja a move tool(v) gombot, és helyezze vissza a vezetőt a vonalzóba.

Az összes útmutató elrejtéséhez és megjelenítéséhez egyszerűen használja a Ctrl+ billentyűt H, vagy lépjen ide View/Extras.

Intelligens objektumok

Mik azok az intelligens tárgyak?

Az intelligens objektumok olyan rétegek, amelyek raszteres vagy vektoros képek képadatait tartalmazzák, például Photoshop vagy Illustrator fájlokból. Az intelligens objektumok megőrzik a kép forrástartalmát, annak minden eredeti jellemzőjével, lehetővé téve a roncsolásmentes szerkesztést a rétegben. Vályogtégla

Az intelligens objektumok felismerhetők a fóliákban, ha a következő ikon van a miniatűrjükön:

Az intelligens objektumok nagyon hasznosak, ha vektor típusú képekkel (SVG, EPS, AI) dolgoznak, de más összetett raszteres fájlokkal is hasznosak.

Próbáljunk meg intelligens objektumot importálni a PSD-be. Töltsön le egy SVG fájlt a flaticonról. Ha importálni szeretné az SVG-t a vásznunkra, egyszerűen húzza a fájlt a vászonra. Most szerkeszthetjük az SVG-t az illusztrátorban vagy bármely más vektoros szoftverben, duplán kattintva az indexképre vagy az intelligens objektumra. A változások megjelennek a PSD-nkben.

Az intelligens objektumok azonban ennél sokkal többet is képesek megtenni. Ha többet szeretne megtudni róluk, nézzen meg 10 dolgot, amelyet tudnia kell az intelligens objektumokról a Photoshopban.

Eszközök exportálása

Először csak emlékeztetni kell arra, hogy a photoshop raszteres szoftver, nem pedig vektor- szoftver. Ez azt jelenti, hogy „nem tudjuk” exportálni az SVG fájlokat a photoshopból. Ehhez ilyen típusú fájlokat kell exportálnia például az Illustrator vagy az Inkscape programból.

Az interneten könnyű képfájlokat szeretnénk. A fényképezéshez tömörített .jpgfájlt használnánk . Ha átlátszóságot (alfa csatornát) kell használnia, akkor a .pngfájlt használnánk . Animált kép esetén a .gif. Ha vektorképre (például ikonokra) van szüksége, a legjobb az, ha a fájlt exportálja .svg. Ha további információkra van szüksége a Photoshop összes elérhető fájljáról, akkor nézze meg a "fájlformátumokat" az Adobe webhelyén.

Exportálja a vásznunkat

A vászon exportálásához kövesse az alábbi lépéseket:

  1. Menj File/Export/Save for Web
  2. Válassza ki a fájl formátumát
  3. Válassza ki a kép méretét
  4. Pick minőség
  5. Megment

Csak egy eszközt exportálhat a vászonról

Valószínűleg exportálnia kell a sablon néhány eszközét.

Exportáljuk a bal nyíl a termék körhinta:

A mozgatás eszköz segítségével meg fogjuk találni a rétegünket. Kattintson a jobb gombbal a nyílra, és válassza ki a réteget Arrow Left. Most kattintson jobb gombbal erre a rétegre a réteg panelen. Válassza ki export asés válassza ki a kívánt fájltípust.

Exportálhatunk mappákat is.

Műveletek

Mi a művelet a Photoshopban?

A művelet olyan feladatsor, amelyet egyetlen fájlon vagy fájlcsomagon játszhat le - menüparancsok, panelopciók, eszközműveletek stb. Például létrehozhat egy olyan műveletet, amely megváltoztatja a kép méretét, effektust alkalmaz a képre, majd elmenti a fájlt a kívánt formátumban. Vályogtégla

Ez a funkció nagyon kényelmes, ha át akarja méretezni a képeket az interneten!

Hozzunk létre egy új műveletet a kép kivágásához és az exportálásához:

  1. Töltsön le egy csomó képet a //unsplash.com/ webhelyről
  2. Nyissa meg az egyik képet
  3. Nyissa meg a Actionspanelt Window/Actions,,
  4. Hozzon létre egy új műveletet az Új művelet létrehozása ikonra kattintva (A kuka ikon bal oldalán található). Nevezzük meg ezt a műveletet Export for web - kliens neve.
  5. Most rögzítjük akciónkat. A felvétel gomb piros színű lesz, és a rögzítés leállításához kattintson a stop ikonra (négyzet alakú ikon a bal oldalon) /
  6. Válassza ki a kivágás ikont, állítsa az arányt 1x1-re, és vágja le a képet /
  7. Most szeretnénk exportálni a képünket File/Export/Save for Web,, kiválasztani JPG, minősége 50%, szélessége 500 képpont.
  8. Kattintson a mentés gombra, és válassza ki a célmappát.
  9. Zárja be a képet mentés nélkül.
  10. A felvétel leállításához kattintson a leállítás ikonra (négyzet alakú ikon a bal oldalon).

Most megvan a cselekvésünk, így kinyithatunk egy képet, és csak a lejátszás gombra kattintva „játszhatjuk le” az akciónkat.

Ha egy képcsoportra szeretnénk alkalmazni a műveletünket, kövesse az alábbi lépéseket:

  1. Menj File/Automate/Batch
  2. Válassza ki a Sourcemappát.
  3. Válassza ki a cselekvésünket
  4. Kattintson Ok

És voilà! Az összes kép az export mappában található.

Remélem, hogy élvezte ezt a webfejlesztőknek szóló kis Photoshop 101 bevezetést? Ha 102-es verziót szeretnél, tudasd velem, hogy mit szeretnél tudni, vagy miről szeretnél többet olvasni?

  • @vince_umo
  • vincent-humeau.com