recursos disseny Archives

Recursos disseny web i gràfic: icones vectorials gratis!

Els icones són un recurs molt utilitzat a l’hora de fer un disseny web o un disseny gràfic. Et permeten representar gràficament molts conceptes de manera fàcil i generalment acceptada.

És per això que hi ha moltes pàgines web i molts dissenyadors que ofereixen icones que dissenyen de manera gratuïta.

Un tipus d’icones que estan molt de moda i s’utilitzen molt en els dissenys web actualment són els anomenats “Line Icons”. L’iOS 7 els va incorporar en el seu disseny i són minimalistes, no busquen protagonisme, simplement descriure la funció que fan.

Us adjuntem un enllaç a una d’aquestes pàgines que ofereixen recursos gratuïts, en aquest cas un paquet de 150 line icons:

Freebies Gallery

Recursos per inspirar-se en disseny web

El disseny web és una disciplina en constant evolució i ara els dissenyadors no només han de pensar en l’estructura i estètica dels elements sinó que s’ha incorporat el moviment, les transicions, el parallax, el disseny responsiu i molts elements que fan que una pàgina web es vegi moderna i viva.

Com que hi ha infinitat de possibilitats han sortit moltes pàgines web de recursos. Algunes són simplement d’inspiració, d’altres han creat tot de sistemes UI amb molts elements de disseny necessaris per a webs i es poden comprar, etc.

Recursos per inspiració de disseny gràfic

Hovers per a icones

Efectes per links

Flat UI design

I n’anirem posant més ja que a nosaltres ens serveixen com a inspiració a l’hora de crear desenvolupar pàgines web i nous dissenys.

Subratllar textos amb Illustrator – Problemes illustrator

Els que acostumeu a treballar amb l’Illustrator segur que us ha passat algun cop que mentre esteu treballant, de sobte, quan seleccioneu un text no us el subratlla.

Quan passen coses d’aquestes ja t’imagines que hauràs apretat algun “comando” que no tocava, però.. quin?! En algunes ocasions m’he estat molta estona buscant la solució.

Doncs bé, avui la solució de quan et passa que subratlles i no t’ho mostra és que has activat l’opció “Ocultar bordes“. Per a que et torni a aparèixer quan subratlles és tan fàcil com anar a VER i seleccionar: “Mostrar bordes” i tot arreglat!!

L’alternativa del teclat és pulsant “comando”+H!

Ho poso en castellà també per si algú s’hi troba i no enten el català:

Los que soléis trabajar con Illustrator seguro que os ha pasado alguna vez que mientras está trabajando, de repente, cuando seleccionáis un texto no os lo subraya.

Cuando pasan cosas de éstas ya imaginas que vas apretado algún “comando” que no tocaba, pero .. cúal?! En algunas ocasiones me he estado mucho rato buscando la solución.

Pues bien, hoy la solución de cuando te ocurre que subrayas y no te muestra es que has activado la opción “Ocultar bordes“. Para que te vuelva a aparecer cuando subrayas es tan fácil como ir a VER y seleccionar: “Mostrar bordes” y todo arreglado!

La alternativa del teclado es pulsando “comando” + H!

Adobe Milagros: l’últim programa Adobe per dissenyadors!

Doncs sí, com ens agradaria que existís aquest programa per poder fer tot tipus de feines que demanen els clients!

De moment, seguirem amb l’Illustrator, el Photoshop, Indesign… per fer el disseny gràfic i disseny web de manera “tradicional”!

Via: Ateneu Popular

Descobreix els colors d’una pàgina web!

Hem trobat una pàgina web que ens permet posar la URL que vulguem i ens busca píxel per píxel tots els colors que tenim a la web, no només en els CSS sinó que també les fotografies, etc. I ens plasma de forma gràfica els diferents colors que hi ha.

Hem fet una prova amb la pàgina de projectes de 2CREA2, a veure què sortia i aquest és el resultat:

A part de poder posar qualsevol pàgina web i veure’n els colors, tenen un seguit de pàgines importants tipus Facebook, Pinterest, Google per què veiem els colors.

La pàgina web en qüestió és: http://webcolourdata.com/

Si més no és una eina curiosa!

Disseny d’infografies: eina web

Les infografíes estan de moda. La visualització gràfica de dades i informes és una manera molt visual de mostrar conceptes o estadístiques que d’altra manera serien molt “pal”.

Qui no ha vist mai una infografia sobre l’ús del mòbil? O bé sobre l’ús de les Xarxes Socials? O sobre l’ús de fundes per iPhone? Mil varietats de dades que poden ser d’utilitat i es poden visualitzar de manera molt atractiva.

Doncs hem descobert una pàgina web que et permet fer infografies de manera senzilla online. Només t’has de registrar de manera gratuïta i pots començar a crear la teva infografia! Ja té un disseny gràfic predefinit, bastant atractiu en algunes plantilles, que et permet canviar els gràfics i adaptar-los a la teva informació.

La web és: www.infogr.am

I us deixem alguns enllaços per poder-vos descarregar alguns vectors d’infografies:

Ara només ens falta saber de què volem parlar i començar a recollir dades per crear la nostra infografia!

Combinacions de colors – Pàgina web

Quantes vegades us heu trobat que voleu combinar diferents colors però no us acabeu de decidir quins tons voleu?

Entre obrir el Photoshop, anar fent quadrats dels colors, canviar-los, saber el nom del color.. és un procés llarg i que de vegades pot resultat pesat.

En el món del disseny gràfic i disseny web la rapidesa és molt important. Has de tenir temps per pensar en el projecte, l’estratègia, els colors, tipografies, què vols mostrar, què vols que la gent vegi, etc, etc, etc. Doncs bé, una eina que ens ajudi a estalviar-nos una mica de temps sempre és benvinguda!

I aquesta eina és la següent pàgina web: Color.hailpixel.com

Al principi tens una pantalla d’un sol color i vas movent el ratolí i vas moven-te per la gamma de colors, de més saturació a menys, etc.

Un cop tens el que volies, fas clic i se’t queda guardat. I a la resta de la pantalla, pots continuar buscant combinacions amb aquell color. I així fins que tinguis els que necessites!

D’aquesta manera sabràs com combinar colors d’una manera fàcil i ràpida, a més molt visual!

Via Cómo Combinar

Favicon – recurs online

Un favicon és l’icona petita que surt a la finestra del navegador. La mida estàndard del favicon és de 16×16, per tant, una mida molt petita, on el detall costa d’apreciar.

Tenir un favicon identificatiu és un detall que la majoria de pàgines web tenen i queda més bé que tenir-ne un de genèric. A nivell de disseny gràfic o disseny web és molt senzill, només has de crear la imatge que vols que aparegui i fer-la amb png o jpg (si no pots fer-la amb .ico) i pujar-la a la web que us mostrem.

Una de les pàgines per crear favicons online i gratuits és:

http://favicon-generator.org/

El que té de bo aquesta pàgina és que es poden crear favicons amb fons transparent. Només has de pujar una imatge .png (amb fons transparent) i ja tindràs el teu favicon transparent!!

Us deixem alguns exemples fets amb aquesta pàgina web:

(ho sabem! encara és amb el logotip vell… ja se sap que a cal sabater, sabates de paper! En breu ho canviem!!)

Us animeu a fer el vostre?? És molt fàcil!!

Recursos per dissenyadors – Eines per disseny web

Hem trobat una pàgina web que ofereix recursos per dissenyadors gràfics o dissenyadors web que sempre ens poden anar bé quan anem faltats d’inspiració o quan necessitem noves eines per crear.

Es tracta de la web CSSMATIC, d’aspecte molt net i simple, et presenta quatre eines claus a l’hora de crear un disseny web:

1. Creació de degradats:

Pots crear els teus propis degradats personalitzats per cada projecte web. Adapta al 100% els colors de l’empresa i el look and feel que vols de manera molt fàcil!

2. Creació de cantonades rodones:

S’han acabat els problemes amb les cantonades rodones a l’hora de maquetar una pàgina web! Més fàcil impossible!!

3. Disseny de textures:

Texturitza qualsevol color de manera que quedi molt més rústic i més característic. Dóna més personalitat a la pàgina web!

4. Creació d’ombres

Ja pots mesurar a la perfecció l’ombra que vols simular a la pàgina web. Més fosca o més clara, més expansiva o menys, ho tens molt fàcil per veure els resultats!

Esperem que us sigui útil, tant pel disseny web com per la maquetació i programació web, ja que també dóna el codi CSS, que ajuda a la maquetació.