Sant Jordi 2013: Dissenys de punts de llibre i capçaleres

Aquest Sant Jordi 2013 hem realitzat alguns dissenys per celebrar la Diada de Sant Jordi:

disseny gràfic capçaleres 2crea2: Estudi disseny i programació web Riba Gorina: lloguer d'autocars, minibusos i vans. Vicenç Villatoro: escriptor i periodista De portes enfora: Jardineria, garden, floristeria Terrassa Nàutica Gènova: Cursos PER, PNB, Patrón Yate y Capitán YateNooem: Fundas para iPhone, fundas para ipad, smartphones y tablets.

Us han agradat?? Per tots hem buscat el punt diferencial i que pugués tenir una conexió amb Sant Jordi.

Ens agrada molt fer aquests petits dissenys que són de curta durada i per celebrar un tema en concret perquè permeten fer coses més abstractes o més allunyades de la imatge corporativa de l’empresa.

Visca Sant Jordi!!

Problemes Illustrator: mostrar requadre delimitador

Doncs bé, el consell d’avui és molt simple i senzill però útil!

Si esteu treballant fent disseny web o qualsevol cosa amb l’Illustrator algun cop us deu haver passat que, de sobte, no es mostra el requadre delimitador dels objectes i, per tant, no podeu modificar-ne les mides ni transformar-los.

Doncs bé, la solució és fàcil: comando+shift+b i es restaura!

mostrar_quadre_delimitador_2mostrar_quadre_delimitador

 

La primera imatge és sense el quadre delimitador i la segona mostra el quadre delimitador.

Les imatges són d’un nou projecte de disseny web que estem duent a terme! Properament us en parlarem!!

Disseny web: pàgines web amb textures

Avui volem parlar de les textures de les pàgines web. Cada cop és més habitual veure pàgines web amb fons texturitzats. Amb les textures, el “soroll” o els patrons geomètrics s’aconsegueix un efecte molt més proper i “natural” de la web, es pot crear un clima més càlid o aconseguir transmetre sensacions que amb el suport offline és molt fàcil, però que al estar visualitzant una pantalla és més difícil aconseguir.

Les textures web poden ser de molts tipus diferents, passant per les més suaus i tènues, com les que podeu trobar a http://subtlepatterns.com o més agressives o vistoses, com les que podem trobar a http://www.colourlovers.com/patterns.

La part més important és saber aplicar bé aquestes textures per expressar el què vols transmetre, així que no es pot abusar de textures ni patrons perquè pots acabar dissenyant una web caòtica i que no sigui atractiva.

També hi ha la possibilitat de no utilitzar cap textura ni patró per crear un disseny web molt net i minimalista. Aquesta opció es pot adoptar si la pàgina web ja té molta informació o fotografies i per eviar atabalar a l’usuari.

Per veure alguns exemples podeu visitar:

Disseny web textures

De Portes Enfora: Hem utilitzat una textura de fusta natural per ajudar a ambientar la pàgina web i apropar-la a la realitat, que és una botiga de jardineria.

sumasa_disseny_web

Sumasa: Per texturitzar les fotografies vam col·locar-hi un patró de quadres grisos semi-transparents.

Disseny web amb textures - Diseño web con texturas - Elevacat

Elevacat: Per rebaixar el vermell de la capçalera hi vam aplicar una textura.

top_taxi_disseny_web

Top Taxi Terrassa: Hi vam aplicar una textura ratllada quadrada de fons.

Mica en mica ens anirem animat a aplicar més textures a les webs i així fer-les més personals i adaptades al negoci!

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

exemple infografia

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

Infografia 1

Infografia 2

Infografia 3

Infografia 4

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!

combinar-coloresdisseny web

 

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:

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

favicon-villatoro

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!

disseny-web-degradats

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!!

disseny-cantonades-rodones

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!

disseny-web-textura

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!

disseny-box-shadow

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ó.

 

Ajudes Photoshop

Farem una secció d’ajudes i “tips” a l’hora de treballar amb diferents programes, programació web, disseny web, etc..

Avui us deixem amb una tonteria, (que just ens ha passat avui!). Hem obert el Photoshop per retocar una fotografia i no apareixia el contorn de l’eina que havíem seleccionat. Volíem desenfocar una part, però no ens sortia l’àrea a desenfocar.

Doncs bé, és tan fàcil com apretar la tecla BLOCK MAYUS. (la de majúscules). I torna a aparèixer l’àrea!

desenfocar-photoshop-disseny-grafic

 

Per veure el resultat final de la fotografia retocada podeu veure-la a: Funda iPhone 5