Aquestes imatges son una mostra del procés seguit per crear el logo
He fet un logo vectoritzat amb Illustrator. La font podria anar integrada amb el logo o apart.
Després de fer el logo, he adaptat el color per posar-lo a la barra de navegació i he preparat un logo més senzill pel favicon.
Aquestes imatges son una mostra del procés seguit per crear el logo
| Nom programa | Format vect/bits | Especialment convenient per a ... | |
|---|---|---|---|
| Lliures | Gimp | mapa de bits | Permet obrir gairebé tots els tipus d’imatges de mapa de bits. Tant Gimp com Photoshop exporten en els formats més habituals, però en Gimp això s’aconsegueix instalant varios plugins. Gimp ha replicat el repertori de Photoshop, pero hi ha moltes funcionalitats que s’escapen. Per aconseguir resultats semblants als de Photoshop, en Gimp requereix més esforç perquè les eines no faciliten tant la feina com en Photoshop. Ocupa molt menys espai que Photoshop. |
| InkScape | vectorial | Permet obrir molts formats d’imatges vectorials. Mentre que Illustrator dona suport a quasi tots els formats d'arxiu, InkScape falla en el format .eps. Tampoc deixa exportar arxius a .jpeg. Tampoc cobreix perfils de colors CMYK. | |
| Propietaris | Photoshop | mapa de bits | Permet obrir menys formats d’arxiu que Gimp. Tant Gimp com Photoshop exporten en els formats més habituals. No es intuitiu i és bastant complexe però té molts més foros i suport que Gimp. En general Photoshop és más completo que Gimp. Soporta el model CMYK, i Gimp no. Es más eficiente y productivo que Gimp. Resumint, Photoshop és millor que Gimp en tot: rendiment, facilitat d’us, funcionalitats, però és de pagament. |
| Illustrator | vectorial | Permet obrir menys formats d’imatges vectorials que InkScape. No es intuitiu, és bastant complexe. |
Aquestes imatges son una mostra del procés seguit per crear el logo
Aquestes imatges son una mostra del procés seguit per crear el logo
| Es vol representar: | Format/s ó recurs | Per què us heu decantat per aquest format? |
|---|---|---|
| Fotografia paisatge | JPEG | Per garantir la qualitat de la imatge. |
| El polze del "like" | font awesome, glyphicons | Perquè son de tipus vector: podem personalitzar-los ràpidament, color, mida… I apart ja venen fets. |
| Logotip | svg, png | Perquè les dues opcions possibiliten el fons transparent i aporten una gran qualitat a la imatge amb colors plans. L’opció SVG, al ser vectorial, pot canviar-se de mida sense afectar a la pèrdua de resolució ni qualitat. |
| Icones xarx. socials | font awesome | Perquè son de tipus vector: podem personalitzar-los ràpidament, color, mida… I apart ja venen fets. |
| Imatge de fons d’un correu electrònic | Base64 | És un format que permet incrustar-se directament en un HTML o CSS i poden ser transmesos a través de la xarxa sense problemes. |
| Gràfic de barres | svg | Perquè svg pot conectar amb temps reals a dades amb javascript i pot animar-se. |
| Personatge animat | GIF, spritesheet | Permeten crear animacions i tenir capes a transparents. |
WebP és suportat de forma nativa per Chrome, Firefox, Edge i Opera.
Fps vol dir frames per seconds; representen el nombre de frames/imatges que es visualitzaen per segon. Una spritesheet és la tècnica de guardar en un sol arxiu un seguit d’imatge spetites (com icones per exemple); això es fa per reduir el nombre de peticions que s’ha de fer al servidor per descarregar-les. Un sprite és la imatge/frame que canviaria cada “x” Framse per Segon, pero donar sensació de mo viment.
Per l'agulla “agullaMinuts” posaria 1 frame cada 60 segons.
Per l'agulla "agullaHores" posaria 1 frame cada 3600 segons.
Faria servir animation i transition-timming, transition-duration.
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2, true); // Outer circle
ctx.fillStyle = "yellow";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(210, 233);
ctx.arc(200, 200, 35, 1.2, Math.PI, false); // Mouth (clockwise)
ctx.fillStyle = "yellow";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(185,140);
ctx.arc(170, 140, 16, 0, Math.PI * 2, true); // Left Year
ctx.moveTo(245,140);
ctx.arc(230, 140, 16, 0, Math.PI * 2, true); // Left Year
ctx.fillStyle = "orange";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(205, 180);
ctx.arc(190, 180, 15, 0, Math.PI * 2, true); // Left big eye
ctx.moveTo(235, 180);
ctx.arc(220, 180, 15, 0, Math.PI * 2, true); // Left big eye
ctx.fillStyle = "white";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(195, 180);
ctx.arc(190, 180, 5, 0, Math.PI * 2, true); // Left eye
ctx.moveTo(224, 180);
ctx.arc(220, 180, 5, 0, Math.PI * 2, true); // Right eye
ctx.fillStyle = "black";
ctx.fill();
ctx.stroke();
ctx.moveTo(40,40);
