Modificar el color d’un cotxe (N.mig)

En aquest tutorial us explicaré una tècnica bastant senzilla per canviar el color d’un cotxe utilitzant el Photoshop. Aplicant el mateix mètode també podrieu canviar el color d’altres objectes. Podríem dir que el més important és tenir paciència i treballar bé la selecció de la part que volem modificar. Hem de ser molt meticulosos.

Aquesta és la imatge que utilitzarem en aquest exemple:

Imatge inicial

Com podeu veure, el fons de l’imatge té uns tons blavosos. Ho podríem modificar abans de començar, però ho farem més endavant perquè així us puc explicar unes operacions que podem fer amb les seleccions.

Primer de tot hem de seleccionar la carrosseria del cotxe. Aprofitant que és de color groc i es diferencia fàcilment de les altres parts de l’imatge, utilitzarem l’eina “Varita mágica” que selecciona colors semblants. Per seleccionar una gamma de colors més o menys àmplia podem modificar el valor de “Tolerancia”. Per aquesta imatge l’hem deixat a 40.

  
Seleccionem la “Varita mágica” i ajustem el valor de la tolerància  a 40

Per seleccionar la part que ens interessa premem el botó esquerra del ratolí damunt de la carrosseria. Per anar afegint parts que no ens hagim quedat seleccionades simplement hi hem d’apretar a sobre mantenint la tecla “Shift” premuda (apareixerà un signe més al punter de la “varita mágica” - veure imatge). Si no ho féssim perderíem la selecció anterior.

Seleccionem la carrosseria utilitzant la “varita mágica” juntament amb la tecla “Shift”

Ara ja tenim la major part de la carrosseria seleccionada, però hi ha parts petites que no ho estan. Una manera per poder-les seleccionar és treballar amb el “Modo máscara”. Per fer-ho, hem de prémer el botó que ens mostra l’imatge de l’esquerra. Us explico breument com funciona el “Modo máscara”: si pintem (utilitzant el pinzell normal) amb el color negre, a l’imatge ho veurem de color vermell i voldrà dir que aquella part NO la tenim seleccionada. En canvi, tot el que pintem amb el color blanc quedarà transparent i voldrà dir que ho tenim seleccionat. Si tornem al mode normal (el botó de l’esquerra) podrem comprovar quines parts tenim seleccionades. A l’imatge següent es mostra com algunes parts primes de la carrosseria s’havien quedat sense seleccionar.

Modo máscara. Perfeccionem la selecció

Amb paciència anirem pintant per seleccionar tota la carrosseria. Convé que dediquem temps a aquesta operació perquè en dependrà el resultat final. Bé, fem un parèntesis. Tornem al mode normal on comprovem que totes les parts estan seleccionades correctament i us explico un mètode per guardar la selecció. Així la podríem fer servir més endavant en cas que ens equivoquéssim.

Per guardar una selecció anem a “Selección > Guardar selección…”. Se’ns obrirà una finestra on podrem posar nom a la selecció i quedarà guardada. Per fer-la servir un altre cop només hem d’anar a “Selección > Cargar selección…”, triar el nom amb que l’havíem guardat i ja la tornem a tenir activa.

Aprofitem això que hem après per millorar els colors del fons de l’imatge:

1. “Selección > Guardar selección…” - Guardem la selecció de la carrosseria.
2. “Selección > Deseleccionar” - Eliminem la selecció actual.
3. “Imagen > Ajustes > Color automático” o bé premem Mayus+Ctrl+B - Millorem els colors del fons.
4. “Selección > Cargar selección…” - Tornem a activar la selecció de la carrosseria.

Ara ja podem modifiar el color del cotxe. Hi ha molts mètodes per poder-ho fer i segurament en farem servir un o altre depenent de l’imatge i del resultat que volem aconseguir. En aquest exemple utilitzarem l’opció “Imagen > Ajustes > Tono/Saturación”, ja que és una de les més senzilles i intuitives. Se’ns obrirà la finestra que es mostra a l’imatge següent:

Finestra de Tono / Saturación. Colorear està seleccionat!

Ens hem de fixar que tinguem marcades les dues opcions de baix a la dreta: colorear i previsualizar. Ara només ens queda anar modificant els valors de Tono, Saturación i Luminosidad fins a trobar un resultat que ens agradi i que sigui real. En aquest cas hem fet servir els valors que es poden veure a l’imatge anterior. Us explico breument què controla cada un:

• Tono: la gamma de colors.
• Saturación: l’intensitat del color seleccionat a tono (va de gris al color pur).
• Luminosidad: la brillantor del color.

Ja només ens queda deseleccionar la carrosseria i podem admirar el resultat final de l’imatge.

Imatge inicial

Resultat final

Bé, espero que aquest tutorial us hagi agradat. Podeu deixar els vostres comentaris, dubtes… el que sigui. Fins la pròxima entrega. Acabarem tunejant tot el cotxe!

Crear accions (N.bàsic)

En aquest tutorial no us ensenyaré a realitzar cap efecte espectacular. Ni a retocar imatges. Ni a fer un fotomuntatge. Però segurament serà un dels tutorials més útils de tots els que faré. Aprendre a dominar les Accions de Photoshop és una de les millors inversions que podeu fer, perquè us estalviareu hores o, fins i tot, dies de feina. Sí, no exagero i ara veureu perquè.

Primer de tot hem de localitzar la finestra Accions. Si no la teniu oberta aneu a Ventana > Acciones o bé premeu la tecla F9. Té aquest aspecte:

Finestra Accions

A la part inferior de la finestra hi ha 6 icones molt intuitius. A continuació us faré una breu descripció de cada un.

1. “Detener ejecución/grabación”. Serveix per parar l’execució d’una acció o per parar de gravar.
2. “Iniciar grabación”. Serveix per gravar les nostres pròpies accions.
3. “Ejecutar selección”. Serveix per començar l’execució de l’acció seleccionada.
4. “Crear grupo nuevo”. Serveix per crear una carpeta per organitzar les nostres accions per temes.
5. “Crear acción nueva”. Serviex per crear una nova acció.
6. “Eliminar”. Serveix per eliminar l’acció que tinguem seleccionada.

Ara que ja ens hem familiaritzat amb la finestra “Acciones” us explicaré com crear les nostres accions que ens serviran per fer automàticament feines molt repetitives, com per exemple, optimitzar les imatges per adjuntar-les en un e-mail, redimensionar-les, aplicar retocs automàtics a fotografies… En definitiva, podem crear accions per qualsevol procediment que necessitem fer sovint.

En aquest tutorial crearem una acció que ens permetrà canviar el tamany d’una fotografia, optimitzar el seu pes per enviar-la en un e-mail i tancar-la. Primer de tot crearem una nova carpeta d’accions. L’anomenarem “Retoc bàsic fotos”.

Botó per crear un nou grup d’accions

Finestra per introduir el nom del nou grup d’accions

La primera imatge ens mostra el botó que hem de prémer per crear un nou grup d’accions (l’icona de la carpeta). Se’ns obrirà un quadre de diàleg com el que mostra la segona imatge on podrem posar nom a la nova carpeta. En aquest cas “Retoc bàsic fotos”. Premem el botó “OK” i ja la tenim creada a la finestra accions.

Grup d’accions creat a la finestra “Acciones”

Ara que ja tenim el grup nou creat ens disposarem a crear una nova acció. Simplement hem de prémer el botó “Crear acción nueva” i se’ns obrirà un quadre de diàleg com el que se’ns mostra a continuació.

Botó per crear una nova acció

Quadre de diàleg per definir les propietats de la nova acció

En aquest quadre de diàleg podem posar nom a la nova acció. En aquest cas li hem posat “Optimització x mail” perquè el nom ha de descriure bastant bé el que realitzarà l’acció. Això ens permetrà trobar-la ràpidament a la finestra “Acciones”. Com podeu comprovar també li podem assignar el grup d’accions, una tecla de funció (F1, F2, etc.) per executar-la i un color per identificar-la amb més facilitat. Només ens queda prémer el botó “Grabar”. A partir d’aquest moment, cada pas que fem quedarà guardat a l’acció. A continuació modificarem el tamany de l’imatge, optimitzarem el pes, la guardarem i tancarem l’original.

Per canviar el tamany de l’imatge hem d’anar a Imagen > Tamaño de imagen… i se’ns obrirà un quadre de diàleg on podrem introduir el nou tamany.

Definim el tamany de l’imatge

En aquest cas volem que l’imatge tingui 300 píxels d’amplada. L’altura es modificarà automàticament perquè tenim activada l’opció “Restringir proporciones”. Premem el botó “OK” i ja hem canviat el tamany. Ara optimitzarem el pes de l’imatge. Per fer-ho utilitzarem l’opció “Guardar para web…” que podem trobar al menú “Archivo”. Se’ns obrirà una finestra com la que es mostra a continuació.

Finestra de l’opció “Guardar para web…”

A l’esquerra sempre veurem l’imatge original, i a la dreta l’optimitzada. En l’exemple hem guardat l’imatge en format .jpg i a una calitat mitjana. Premem el botó “Guardar” i se’ns obrirà el típic quadre de diàleg on introduirem el nom amb el que volem guardar l’imatge optimitzada.

Definim la calitat de l’imatge

Ja només ens queda tancar l’imatge original. Ens preguntarà si volem guardar els canvis i li direm que no, així ens assegurem que no modifiquem l’imatge bona. Finalment hem de prémer el botó “Detener grabación” i ja tindrem la nostra acció creada. Ho podem comprovar a la finestra “Acciones” que ens ha quedat de la següent manera:

Nova acció creada

Com podeu veure el programa ha anat gravant cada un dels passos que hem realitzat. A partir d’ara ja podrem utilitzar l’acció amb les altres imatges que tinguem. Però tal i com ho tenim ara, totes les imatges que modifiquem amb l’acció que hem creat, tindran una amplada de 300 píxels, es guardaran en format .jpg a una calitat mitjana i tancarem l’original sense guardar-ne els canvis. Però què passa si volem fer servir aquesta acció però necessitem que l’amplada de l’imatge sigui de 400 píxels? O si la volem guardar a una calitat diferent de la que hem fet servir quan hem creat l’acció? O si volem guardar els canvis i perdre la foto original? No us preocupeu. No haurem de crear una acció diferent per cada cas. Simplement hem de prémer sobre el requadre buit que hi ha al costat de cada pas i podrem modificar els paràmetres que desitgem.

  

  
Diferents opcions per canviar els paràmetres dels passos de l’acció

En les 3 imatges anteriors podem veure com en la primera hem marcat el requadre de l’esquerra de “Tamaño de imagen”, en la segona el d’”Exportar” i en la tercera el de “Cerrar”. En el primer cas l’acció es pararà per preguntar-nos el tamany final de l’imatge. En el segon cas es pararà per preguntar-nos en quin format la volem guardar i en quina calitat, i en l’últim cas ens preguntarà què volem fer amb l’imatge original. També hauríem pogut marcar les 3 opcions a la vegada i a cada pas es pararia per preguntar-nos tots els  paràmetres.

Bé, ja heu vist que és molt fàcil crear una nova acció. El límit el poseu vosaltres. Podreu automatitzar molts procediments que necessiteu fer servir sovint. Em creieu ara quan deia que us estalviareu hores o fins i tot dies de feina?

Espero que aquest tutorial us hagi servit.

Eliminar elements d’una fotografia (N.bàsic)

En aquest mini tutorial us explicaré el funcionament bàsic de l’eina “Pincel Corrector”. És molt potent i útil, sobretot a l’hora d’eliminar elements que poden arribar a aixafar completament una fotografia: cables elèctrics, grafitis en alguna paret, etc. El funcionament és molt simple i amb una mica de paciència i de pràctica podem aconseguir resultats impresionants, arribant a transformar per complet una foto.

En aquest post eliminarem una xapa que hi ha en una paret d’escalada, però podríem eliminar qualsevol cosa (pals d’electricitat, grafitis, forats…). L’imatge que tractarem és la següent:

Imatge inicial

Amb el “pincel corrector” eliminarem la xapa metàl·lica que hi ha al mig d’una manera molt senzilla. Abans de començar, us recomano treballar sempre amb una còpia de l’imatge original o bé duplicar-ne la capa del fons. Doncs va, entrem en matèria.

Primer de tot sel·leccionarem l’eina “pincel corrector”. Està situada just al costat del pinzell normal (veure imatge de l’esquerra). Aquesta eina funciona de la següent manera: 

• - Busquem la zona que ens servirà de mostra (en aquest cas una zona de roques).
• - Premem la tecla “Alt” perquè ens surti el cursor de sel·lecció (en forma de creu) i sense deixar d’apretar-la cliquem el botó esquerra del ratolí just al punt que volem fer servir de mostra.
• - Pintem, com si utilitzéssim el pinzell normal, a sobre la xapa sense preocupar-nos massa de fer-ho molt exacte. En el meu cas ho he fet amb un tamany de pinzell de 19 píxels.
• - Deixem de prémer el botó del ratolí i comprovem el resultat final.

En principi ja tenim l’imatge acabada. Si no ens acaba de convèncer el resultat podem provar amb diferents tamanys de pinzells o bé sel·leccionant altres punts de mostra.

A continuació podeu veure 3 imatges. En la primera estem sel·leccionant el punt de mostra, en la segona estem pintant a sobre la xapa i en la tercera podeu comprovar el resulta final.

1. Sel·leccionar punt de mostra

2. Pintem a sobre la zona que volem modificar (veiem com la zona de mostra també es desplaça

Les següents imatges ens mostren l’abans i el després. Com podeu comprovar, ràpidament i amb molt poc esforç, hem eliminat un element de l’imatge utilitzant el “pincel corrector”.

Resultat després d’utilitzar el “pincel corrector”

Ja heu vist que utilitzant les eines adequades és molt fàcil realitzar modificacions importants a una imatge utilitzant el Photoshop. També podríem haver eliminat qualsevol altre cosa. Us animo a que ho proveu amb imatges vostres i no deixeu de practicar. Amb paciència podeu arribar a eliminar persones o a reparar completament una fotografia estripada (això ho deixem per un tutorial de nivell més avançat).

Espero que el post us hagi servit per aprendre alguna cosa. No dubteu en deixar algun comentari!

Efecte rollover (N.mig)

En ocasions, utilitzar imatges per crear els menús, pot ser interessant per millorar l’aspecte de la pàgina. Però la majoria de tècniques bàsiques per crear un efecte de RollOver tenen un problema: la càrrega de les imatges. Això provoca que durant uns instants, al col·locar el ratolí a sobre l’enllaç, no aparegui cap imatge (sobretot en les conexions més lentes). Per solucionar aquest problema i no haver d’afegir codi en JavaScript (que alguns usuaris tenen desactivat) hi ha una tècnica en CSS que es basa en crear una sola imatge per tots els estats dels enllaços, jugant amb la part visible i la posició.

Aquest és el codi HTML per crear el menú. Fixeu-vos que els elements del menú es troben dins d’una etiqueta <span> que ens permetrà ocultar el text però sense reduir l’accessibilitat de la pàgina (i els buscadors el podran llegir igualment).

<div class="menu">
      <a href=”biografia.php” id=”biografia”><span>Biografia</span></a>
      <a href=”obres.php” id=”obres”><span>Obres</span></a>
      <a href=”exposicions.php” id=”exposicions”><span>Exposicions</span></a>
      <a href=”contactar.php” id=”contactar”><span>Contactar</span></a>
      <a href=”estudi.php” id=”estudi”><span>L’estudi</span></a>
 </div>

Per crear l’efecte rollOver, primer de tot crearem una imatge que ocupi el doble de l’amplada de l’enllaç. La meitat esquerra serà la que es veurà normalment, la meitat dreta es veurà en l’estat :hover (l’imatge serà diferent per cada element del menú).

Imatge amb els dos estats per crear l’efecte

Ara hem de definir els estils del menú. Llegiu els comentaris per saber què fa cada part.

/*Amaga el text alternatiu del menú*/
    a span {display:none;}

/*Imatges que substitueixen el text de cada elment del menú, basant-nos en l’id*/
   #biografia {background-image:url(../images/menu/biografia.gif);}
   #obres {background-image:url(../images/menu/obres.gif);}
   #exposicions {background-image:url(../images/menu/exposicions.gif);}
   #contactar {background-image:url(../images/menu/contactar.gif);}
   #estudi {background-image:url(../images/menu/estudi.gif);}

/*Definim els enllaços com elements de block per crear un menú vertical, els assignem l’amplada i la llargada i posicionem l’imatge segons l’estat de l’enllaç*/
.menu a:link, .menu a:visited {
    display:block;
    width:175px;
    height:30px;
    line-height:30px;
    background-repeat:no-repeat;
    background-position:left top;
    }

.menu a:hover, ..menu a:active, .menu a:focus {
    background-position:right top;
    }

L’amplada original de l’imatge era de 350px. Fixeu-vos que l’amplada de l’enllaç és de la meitat (175px) i posicionem l’imatge de fons a l’esquerra, així només es mostrarà la part que ens interessa. L’únic que fem després és moure l’imatge per alinear-la a la dreta i poder veure la part que representa l’estat :hover. Així de senzill.

Part visible en l’estat a:link. Alineada a l’esquerra

Part visible en l’estat a:hover. Alineada a la dreta.

Per comoditat, properament crearé tots els exemples dels tutorials en una pàgina a part, ja que en aquest blog és més complicat (si no vols pagar per editar els arxius CSS).

Espero que us hagi servit aquest post. Per qualsevol dubte o comentari deixeu un missatge.

Inauguració del blog!

Benvinguts al meu blog personal. Espero que hi trobeu algun tutorial que us sigui d’utilitat (de moment ho dubto, fins que no el comenci a omplir). Intentaré tractar temes de tots els nivells, per ajudar als “newbies” a fer les seves primeres línies de codi i per ajudar als que porten més temps programant a trobar conceptes nous per aprendre.

 Els principals llenguatges que tractaré són: HTML, CSS, Php, MySQL i ActionScript. També intentaré oferir bons tutorials de retoc de fotografies digitals i de manipulació d’imatges. A vegades se m’escaparà algun article d’opinió. Si serveixen perquè algú hi reflexioni una mica ja em dono per satisfet.

No deixeu de visitar el blog. Procuraré afegir-hi nous continguts tant sovint com pugui.

Gràcies a tots i no dubteu en escriure comentaris. Tots seran benvinguts i publicats (tant positius com negatius). L’únic requisit és el respecte.

Fins aviat.