Eszköztár

55 Kezdőlap - Webszerkesztés - HTML - Szerszámosláda

Jegyzet

Webes fejlesztéseink során a színek, képek, fájlformátumok kezelése kapcsán gyakran kell szembenéznünk olyan problémákkal, melyekre - különféle feltelepítendő programok helyett - az online világ is megoldást kínál. Ebben a jegyzetben ilyen megközelítéssel szemezgetünk érdekesebb, ingyenes lehetőségeket.

Ezt látta már?

Színkeverés

RGB vagy CMYK?

1. Színséma generátorok

A színséma generátorok vagy egy általunk mondott színhez adnak ehhez illő árnyalatokat, vagy komplett színsémákat kínálnak számunkra, amelyeket felhasználva egy szép megjelenésű, színekben harmonizáló weboldalt készíthetünk. Az egyik legnépszerűbb ilyen online színséma generátor a Paletton.com nevű oldal.

• http://paletton.com/

Az oldal használatához célszerű megtekintetni a Paletton Tutorial c. videót (EN).

Természetesen ezen kívül más érdekes generátorok is léteznek, amiket érdemes megnézni:

• https://color.adobe.com/create/color-wheel/
• http://colorhunter.com/

További hasonló oldalak a Google segítségével is felfedezhetőek:

• Google: color scheme generator

2. Színek egy képről

Olykor szeretnénk, ha egy fényképről, vagy ábráról meg tudnánk határozni valamely szín (pixel) színkódját. Ebben segíthet az alábbi linkek bármelyike:

• https://www.colorcodepicker.com/
• https://imagecolorpicker.com/
• https://html-color-codes.info/colors-from-image/

Első lépésként fel kell töltenünk a kérdéses képet, majd arról kiválasztani a számunkra érdekes képpontot.

3. Ikongyűjtemények

Weboldalaink dekorációs elemeiként, vagy pl. menüpontok piktogramjaiként szükségünk lehet különféle ikonokra, különböző méretekben. Ekkor jöhet jól egy nagyobb ikongyűjtemény, mint amilyet a FindIcons.com is kínál.

• http://findicons.com/

Az ikonok egy másik széles tárházát tartalmazza az All-free-download.com gyűjteménye, mely nemcsak egyesével teszi lehetővé a képek lementését, hanem valamely tematika szerint válogatott kollekciót akár egy-egy tömörített állományban is:

• https://all-free-download.com/free-icon/

Ez utóbbi oldalon már csak azért is érdemes szétnézni, mert nem csak ingyenesen letölthető ikonokat tartalmaz, hanem további menüpontjain keresztül szintén ingyenes grafikákat, háttérképeket, különleges betűtípusokat, sőt komplett websablonokat is eléretővé tesz.

Egy harmadik kép-, grafika- és ikongyűjtemény található a vectorstock.com oldalán, 24 millió(!) képpel, kiváló keresővel, akár kifejezetten magyarspecifikus tartalommal is:

• https://www.vectorstock.com/royalty-free-vectors/hungary-vectors

Negyedikként pedig álljon itt egy igazi kincsesbánya, melynek tartalma nem csupán több mint 5 millió monokróm ikon, hanem ráadásként ezen ikonok színe és háttérszíne is online állítható a letöltés előtt. És bár a letöltést picit megnehezíti a kötelezőnek tűnő regisztráció, azért a "Jobb egérgom: Vizsgálat" opció itt is csodákra képes ;)

• https://thenounproject.com/

4. Saját ikon készítése

Megeshet azonban, hogy a fenti ikongyűjtemények sok ikonja helyett valami mást szeretnénk: például már egy meglévő, egyéb (PNG, JPG, BMP) képformátumú képből ikont alkotni. Ebben az esetben az ICO Convert lehet a segítségünkre:

• https://icoconvert.com/

Ha pedig még ennél is egyedibb ikonban gondolkodnánk, amit mi magunk rajzolunk meg pixelről pixelre, akkor az X-Icon Editorral érdemes próbálkozni:

• http://www.xiconeditor.com/

5. Átlátszó hátterű PNG képek

Amikor weboldalon szeretnénk elhelyezni valamilyen képi tartalmat, célszerű ehhez átlátszó hátterű képet választani, hogy bármilyen weboldal háttérszín előtt jól mutasson. Természetesen kereshetünk ennek megfelelően a transparent kiegészítő szó megadásával a neten is, de használhatjuk az alábbi, kifejezetten átlátszó hátterű képek közel 100ezres gyűjteményét is:

• http://pngimg.com/

6. Kép hátterének átlátszóvá alakítása

Ha a weboldalunk dekorálására választott kép (grafika, logó, ikon, piktogram) nem átlátszó hátterű, ám úgy volna rá szükségünk, akkor ezt mi magunk is átlátszóvá tehetjük némi utómunkával: a képek fix háttérszíne általában viszonylag könnyen eltávolítható - vagyis transzparensé tehető. Hogy ehhez ne kelljen képszerkesztő programot telepíteni/használni, választhatjuk az online megoldást:

• https://www199.lunapic.com/editor/?action=transparent

Természetesen a LunaPic Online Photo Editor számtalan további lehetőséget kínál, amikre érdemes időt szánni, és áttekinteni őket.

7. Animált GIF készítése

Amikor meglévő képekből szeretnénk animált GIF-et készíteni, akkor jöhetnek jól az EzGIF.COM által kínált lehetőségek:

• https://ezgif.com/maker

8. PDF állományok lehetőségei

Webes tartalomként dokumentumok legcélszerűbben PDF formátumban publikálhatóak. Ám a PDF állományokra sokszor hajlamosak lehetünk úgy tekinteni, mint egy megbonthatatlan, szerkeszthetetlen egységre. A valóságban azonban jó néhány opció áll a rendelkezésünkre ezekkel kapcsolatban is.

a) PDF fájlok darabolása, lapok kiszedése

Az iLovePDF egyebek mellett arra kínál lehetőséget, hogy lapokat emelhessünk ki egy PDF állományból, ha a fájlt nem teljes egészében, hanem csak részben szeretnénk felhasználni:

• https://www.ilovepdf.com/split_pdf

b) Képek, szövegek exportálása PDF fájlból

Ugyanakkor néha arra is szükségünk lehet, hogy egy PDF fájlnak csak a szövegét, vagy egy-egy benne szereplő képet tudjunk kimásolni:

• https://www.extractpdf.com/

c) PDF fájl készítése képfájlokból, közvetlenül

Esetenként meglévő JPG képeinkből - szkennelt, vagy befényképezett lapokból - szeretnénk PDF állományt összefűzni:

• https://jpg2pdf.com/

d) PDF fájl lapjainak képpé alakítása

ÉS persze a fentinek az ellenkezője is előfordulhat, amikor PDF állományunk lapjait szeretnénk képekként kezelni:

• https://pdftoimage.com/

9. Weblap lefényképezése

Ha szükségünk van egy weblap pillanatnyi fényképére, de az nem fér rá egy képernyőre, így csak részletekben lenne lefényképezhető, akkor könnyítheti meg a munkánkat a screenshotlayer:

• https://screenshotlayer.com/

Bár a program korlátlan használata nem ingyenes, havi 100 fotóig költségmentesen is használható regisztráció esetén.

10. ASCII Art

Kevéssé lehetne szükségszerű funkciónak nevezni, ám mint érdekesség, talán érdemes pár gondolatot szentelni az ASCII Art funkcióknak - vagyis azon lehetőségeknek, amikor kizárólag egyszerű karakterekből rajzolunk egyszerű képet, szöveget, esetleg ezen karakterekkel készít(tet)jük el egy meglévő igazi kép sematikus - alapkarakterekből felépített - másolatát.
Például így:

			 _        __      _                          _     _           
			(_)      / _|    (_)                        | |   | |          
			 _ _ __ | |_ ___  _  ___  __ _ _   _ _______| |_  | |__  _   _ 
			| | '_ \|  _/ _ \| |/ _ \/ _` | | | |_  / _ \ __| | '_ \| | | |
			| | | | | || (_) | |  __/ (_| | |_| |/ /  __/ |_ _| | | | |_| |
			|_|_| |_|_| \___/| |\___|\__, |\__, /___\___|\__(_)_| |_|\__,_|
		        	        _/ |      __/ | __/ |                          
			               |__/      |___/ |___/                           
	

                                            ..::----:...                                            
                                   ...:=#@@@@@@@%%%%@@@@@@@#=:...                                   
                          ........:+%@@%*=-:............:-=*%@@%*:........                          
                       ..-%@@@@%%@@@+...                    ...=%@@%%@@@@@-...                      
                     ..+@@%+==%@%=...                           ..-%@%==+#@@+..                     
                    .-@@%+====@%-.                               ..:@@=====#@@=.                    
                 ...#@@+=====*@*.                                  .*@#======%@%:.                  
                 .=@@#=======%@=.                                  .=@@=======*@@=.                 
               ..*@@+=======+@%:.                                  .:%@*========@@*..               
               :%@#=========#@#..                                  ..*@#=========#@@:..             
             .-@@#==========%@=.                                     -@@+=========*@@-.             
           ..-@@+==========+@@...  .:#@@#:.              .:#@@#:.    .@@*==========+@@-.            
          ..=@@+===========#@#...  :@@@@@@-              :%@@@@@-    .*@#===========+@@+..          
          .=@@+============%@=.   .+@@@@@@+.             -@@@@@@*    .-@%============+@@+..         
         .:%@+=============@@:.   .-@@@@@@-              :@@@@@@=     .@@=============+@@-.         
         .*@*=============+@#..    .-@@@@-.              .-@@@@-.     .#@+=============*@%...       
         .%@*=============#@*..      ......              ......       .+@%=============+@%..        
         .=@@=============@@=..                ......                 .-@@=============%@+.         
         ..+@@+==========+@%:..             .-#@@@@@@#-..             .:%@*==========+@@*....       
          ..-@@#=========%@*..             .%@@@@@@@@@@%.             ..*@%=========#@@-.....       
            ..+@@%+====+@@#..   . ..       .%@@@@@@@@@@@.       ...     .#@@+====+%@@+....          
            ....=#@@@@@@@@:.... .=%-.      .:%@@@@@@@@%-.      .:#+.    ..@@@@@@@@%=......          
                 .......=@#.... .*@+.       ..:#@@@@%:..       .=@#.    .*@+...........             
                        :%@=.   .:@@:.        ..-@@-.          .%@-.    -@%:.                       
                        .-@%:.   .-@@+.       .:%@@%-...    ..=@@=.   .:%@=..                       
                        ..=@%:.   ..#@@@*=--=#@@@@@@@@#+--=+%@@%:..  .:%@=..                        
                        ...-@%:..   ..-+#%%%@@*++@@+=+@@@%%#+-.... ..:@@=.                          
                           .-@@+...     ...-@%===%@+==#@- ....   ...+@@-..                          
                            ..*@@-..       .%@+=======@%.       ..-%@*.                             
                              .:#@@+.      .:%@%*==*%@%-.      .=@@%:.                              
                                ..+@@@+:......-#%@@%#=..  ..:=%@@*..                                
                                ....:+@@@%*=-..........:=*#@@@*-...                                 
                                       ..+%@@@@@@@@@@@@@@%+:                                        
                                           .. ..::::..                                              

Vagy akár ahogyan a jobb oldali képen látható.

Mit kell ehhez tenni? Mivel hasonló tartalmak online előállítására számtalan weboldal kínálkozik, ezen a helyen nem is kifejezetten volna praktikus - más opciók mellőzésével - konkrét oldalakat nevesíteni. Szerencsésebb inkább keresési ötleteket javasolni az elinduláshoz:

• ASCII art generator
• ASCII art from image

Eddig 1 hozzászólás van a témához:

---

Új hozzászólás:
E-mail cím:	Erre a címre küldjük ki a hozzászólás jóvá- hagyásához szükséges linket. Az e-mail címet sehol nem tesszük közzé.
Név:	Ez a név fog megjelenni az Ön hozzászólásai mellett.
Mennyi tizenkilenc + nyolc? Számjegyekkel írja be!	Ez a robotok beírása elleni védelem miatt szükséges ellenőrzés.

© infojegyzet.hu, 2019. március