Portfolio laboratori digital by irene mallafre

laboratori digital ILLUSTRATOR INDESIGN DREAMWEAVER FLASH Exercicis variats per a apendre el funcionament bàsic d’aquests programes i veure les eines que tenim a mà per a realitzar els nostres projectes. IRENE MALLAFRÉ GRUP 01 GRAU EN DISSENY ELISAVA

ESTILS MAQUETACIÓ VECTORS A. SCRIPT 3.0 HTML CCS

Index sĂ¨rie de wallpapers 3 efectes 3D 6 portada i contraportada 8 dibuixa un mapa 10 conclusions 11

illustrator indesign

serie de wallpapers El motiu de la sèrie de fons d’escriptori és la música rock. El noi que toca la guitarra està traçat amb la ploma, definint les zones que anirien de color i les que anirien de blanc. El fons s’ha fet a partir del calc interactiu de gotes de pintura. Jugant amb la mida, la posició, el color i el tipus de contorn d’aquestes, he anat conformant la il·lustració. El color està aplicat en forma de degradat al conjunt sencer, no per zones. El de la guitarra és pintura interactiva. Per acabar, al fons he aplicat un motiu de ratlles grises que ajuda a que el dibuix en blanc destaqui encara més.

Illustrator CS5 Dimensió 1920x200 px Resolució 300 dpi

En aquest veiem una noia tocant la bateria. Està traçada amb l’eina ploma. El fons ha estat realitzat a partir de pinzells juntament amb l’eina “molinete” i d’altres modificadores de formes. Un cop tenia el dibuix principal, en vaig fer una copia més gran, la vaig desplaçar, i li vaig aplicar un contorn discontinuo. El dibuix principal està acolorit amb un degradat, excepte el groc dels llavis. El fons és d’un color gris lilós.

El tercer de la sèrie representa un mur d’un possible local de concerts underground. L’ombra que aquest projecta es transforma en la papallona que he adoptat com a símbol del suposat grup. L’edifici ha estat realitzat amb l’eina perspectiva. El que més feina ha portat ha estat la realització dels maons que el cobreixen. A sobre d’una capa de color gris vaig situar un traçat de maons adaptant-lo a la perspectiva. Vaig acolorir-lo tot de gris clar, deixant veure el fons. En el mur, a més, hi vaig aplicar amb efecte multiplicar la il·lustració anterior, imitant a un graffity. Amb l’eina text hi vaig afegir “in concert” L’ombra està pintada amb el “pincel de

manchas” i l’eina “molinete”. La papallona està acolorida amb un degradat radial. Per a donar-li més efecte de moviment, he realitzat uns traços amb un pinzell de “cerdas” personalitzat. Per acabar, el fons és també un degradat de blanc a negre, amb la llum centrada a la papallona. Per a donar-li el toc final, a sobre d’aquest hi ha aplicat un “efecto de ruido”.

Illustrator CS5 Dimensió 1920x200 px Resolució 300 dpi

dibuixa un mapa LA TIERRA MEDIA

LORIEN

LEYENDA Mapa de la tierra media. Este mapa es el que usaron Frodo y sus amigos durante su valiente travesia. Guia turística completa de la tierra media, con las posadas y las tabernas indicadas, asi cómo los enemigos que os podéis encontrar. magos

hobbits

enanos

enemigos

dedicados al bien o al mal. suelen estar escondidos bajo tierra.

no menospreciarlos por su tamaño.

todo tipo de seres malignos dirigidos por Sauron.

ELFOS

posada

caballeros

taberna

habilidosos guerreros con grandes conocimienos. humanos entregados a la batalla

lugar dónde descansar, aunque no siempre en paz.

lugar dónde ahogar las penas si fracasas.

Illustrator CS5 Dimensió 800x600 px Resolució 300 dpi

A l’hora de fer el mapa vaig optar per fer un mapa del Senyor dels Anells. Tant el contorn com els rius han estat dibuixats a mà amb el pinzell utilitzant la tableta gràfica. He aplicat diferents estils de traç per tal de donar-li més cos. Les muntanyes i els arbres són símbols que es repeteixen molts cops conformant les serralades i els boscos. També han estat dibuixats a mà. Per tal de col·locar-los al seu lloc he fet servir les eines del menú desplegable de “rociar símbolo”. Els símbols de la llegenda, són dibuixats amb el traç cal·ligràfic del pinzell. Per a fer la llegenda he establert diversos estils de ca-

ràcter i paràgraf, per als títols, textos, destacats i més. Amb un altre traç de pinzell i mode de visió “superponer” s’han traçat els possibles recorreguts per arribar a Mordor. El fons està fet aplicant un efecte de paper mullat. En el panell d’aparença l’hi sobreposem un degradat amb tons verds, vermellosos i taronges amb una opacitat d’un 30% amb textura i ombrejat. Al conjunt també hi aplico un efecte d’ones marines. La diferencia de color entre el troç de terra i el “mar” és donat a que el primer està pintat de color beix i sopreposat al fons.

efectes 3d Aquí es mostra el detall de l’etiqueta de l’oli. La il· lustració és un calc interactiu amb un degradat.

Illustrator CS5 Dimensió 52x160 mm Resolució 300 dpi

Aquesta és la composició final. Tant les caixes com les ampolles han estat realitzades amb l’eina 3D (“extruir” i “girar” respectivament). L’etiqueta s’ha aplicant mapejant la imatge. De les caixes un cop extruides, se n’ha expandit l’aparença i s’ha jugat aplicant efectes de resplendor interior, línies blanques i màscares de transparència per a accentuar el seu brillo. A l’ampolla s’hi ha aplicat un brillo utilitzant un degradat i la màscara de transparència.

Les olives han estat realitzades amb utilitzant l’eina malla. Com a toc final he fet el reflex dels objectes, movent les parts necessàries i aplicant màscares. El fons degradat sustenta el conjunt.

Illustrator CS5 Dimensió 2710x2480 px Resolució 300 dpi

portada i contraportada

El concepte de la portada és un cervell cibertronic. La il·lustració ha estat realitzada amb Illustrator, traçant la meitat del cervell i fent una simetria per a l’altra meitat. Un cop fet, s’hi ha aplicat un dels estils per defecte de “efecto neón”. Finalment s’ha sobreposat un degradat de tons blavosos i verds a tot el conjunt. Un cop acabat, la imatge s’ha passat al photoshop, on s’ha augmentat al màxim la saturació i lluminositat dels colors, per aconseguir un efecte “fosforescent”. A més, s’ha aplicat un degradat radial de negre a transparent, per donar l’efecte de que la llum es va difuminant quan s’allunya del circuit, i així mostrar que prové d’aquest. La maquetació de la portada s’ha dut a terme en InDesign. Tot hi haver-hi retícula no es segueix estrictament amb l’objectiu de fer destacar la il·lustració. He establert diferents estils de paràgraf, a més a més d’un estil gràfic consistent en un resplendor exterior que més tard he aplicat en alguns dels títols.

laborator digital ILLUSTRATOR INDESIGN DREAMWEAVER FLASH Exercicis variats per a apendre el funcionament bàsic d’aquests programes i veure les eines que tenim a mà per a realitzar els nostres projectes. IRENE MALLAFRÉ GRUP 01 GRAU EN DISSENY ELISAVA

Illustrator CS5, Photoshop CS5, InDesign CS5 Dimensiรณ 21 x 29,7 cm Resoluciรณ 300 dpi

ri ESTILS MAQUETACIร VECTORS A. SCRIPT 3.0 HTML CCS

laboratori digital irene mallafre

dreamweaver

red expresion

Dreamweaver CS5, Photoshop CS5 Resolució 72 dpi

Web realitzada a partir d’una il·lustració de l’artista “el gato azul”. La temàtica era un blog on quelcom penja imatges d’artistes i dissenyadors que li agraden. A la il·lustració se l’hi ha afegit amb photoshop el títol de la pàgina web. Després s’ha generat el fons amb l’eina selecció de photoshop per tal de crear una columna que encaixés perfectament amb el cos negre de la noia. A més a més se l’hi ha afegit una segona

franja que acaba de definir l’espai per al contingut. En la franja negre es situen els links i en la part blanca el contingut. Aquesta pàgina web no conté cap div. El fons simplement està col·locat afegint l’estil a l’etiqueta body, i els elements estàn posicionats amb ccs (pading, marging i position).

alice in wonderland

Dreamweaver CS5, Photoshop CS5 Resolució 72 dpi

Web sobre Alicia en el país de les meravelles. La capçalera és una imatge retocada amb photoshop. Els seu contorn ha estat esborrat amb un brush que dona sensació de desgastat i la imatge s’ha guardat en png. De fons, s’ha creat un pattern que imita un wallpaper antic i que encaixa amb l’estil de la pàgina.

L’organització de la pàgina ha estat construïda amb DIVS, tenim un de header, un de contingut general a l’interior del qual hi ha els tres divs de contingut, i finalment, un footer. Les tres columnes tenen la propietat de flotar mentre que el footer l’anula.

portfoli En aquesta web es pretenia crear un portfoli propi. La fotografia utilitzada com a capçalera és una foto meva així com tota la resta que trobem a la pàgina. S’ha utilitzat la mateixa estructura que en l’anterior afegint un DIV més que conté tota la web i que ens permet afegir aquest fons desgastat sobre el fons definit en el

body. El fons negre és una imatge creada en photoshop i guardada amb transparència. S’han treballat també els efectes de hover i les classes per a fer l’aspercte de la web més interessant.

Dreamweaver CS5, Photoshop CS5 Resolució 72 dpi

portfoli v.ii El disseny de l’anterior portfoli no acababa de complir amb l’objectiu així que vaig redissenyar-lo. En aquest cas per a realitzar els gràfics he fet servir una de les meves il·lustracions sobreposada a un motiu de wallpaper marró. Seguint en la línea anterior, la web es fon amb el fons.

Aquí podeu veure la pàgina principal, on s’explica el contingut de la web (escrit des del Dremaweaver i col· locat amb un DIV per tal de que Google pugui indexar els continguts de la pàgina.

Dreamweaver CS5, Photoshop CS5 Resolució 72 dpi

La web està estructurada amb DIVs, un de general, header, menú, contenido (a l’interior columna dreta columna central flotant a l’esquerra) i footer. Els botons s’han tractat amb una imatge de fons creada amb el Photoshop. El footer està més ben tractat qu en les webs anteriors i conté la informació de qui som i el contacte.

Quan al CCS s’han aplicat tan ID com classes com modificat etiquetes. S’hi ha afegit media, enllaços externs, interns, descarregues d’arxius pdf, formularis i contacte a través del mail.

conclusions

Laboratori digital ha estat una assignatura molt útil per a aprendre a manejar els programes que són indispensables per al disseny gràfic (especialitat a la qual em vull dedicar). He aprés moltes eines, característiques i trucs que no coneixia i que m’ajudaràn d’ara endavant amb els meus projectes. Ara bé, encara em queda molt per a aprendre i trobo que ha estat excessivament curta, ja que aquests programes donen por molt més! M’agradaria que hi haguessin més hores per que per molt bones idees que es tinguin si després no es poden realitzar de manera adequada, són inútils.

Laboratori digital

laboratori digital irene mallafre