Diseño de página web desde photoshop para pasar al DW

Principalmente abrimos el Photoshop donde allí crearemos nuestro diseño para página web.
Para cada cosa que se haga, es decir, para cada parte del diseño que se crea, hay que crear capas, asi cuando se pase al DW no hayan dificultades.
Para que nuestro diseño quede más bonito y destaque más, podemos ir a CAPAS < ESTILO DE CAPAS < OPCIONES DE FUSIÓN, te permite dar relieve, sombras, etc a la imagen que pongas o lo que sea que estés creando.




Cuando el trabajo esté hecho, antes de guardar escogemos la herramienta selector, y seleccionamos cada uno de los cuadraditos, rectangulos q hayamos hecho y luego acabado esta parte le damos a guardar como página web y dispositivos, le damos aceptar donde luego nos saldrá opciones, y le damos a " todos los sectores" guardar.



Abrimos el DW, le damos a crear una página nueva donde allí le damos a la herramienta DIV PA, hacemos el cuadrado con la medida exacta que hayas hecho anteriormente desde el Photoshop, luego le damos en el extremos del cuadrado y cuando salga un cuadradito chiquitito se clica, y alli te saldrá una mano,


cuando salga, nos vamos abajo donde pone imagen de fondo y ahí le clicamos a la carpetita que sale a la derecha y buscamos la imagen que queremos poner.

Esko Visualizer

Nos descargamos desde el servidor AGM2 la carpeta con el programa Esko Visualizer, una vez puestas sus opciones correctamente a la hora de instalarlo, abrimos el Illustrator donde allí en la pestaña de ventana se visualizará lo ya instalado.
Básicamente este programa sirve para diseñar lo que viene a ser el troquelado de las cajas, carpetas, envases de productos, lo que sea.
Entonces por ejemplo diseñamos en el Illustrator lo que viene a ser la caja extendida, de manera que se pueda hacer bien el dibujo que deseemos.



Una vez hecho eso, el siguiente paso sería guardarlo como ard y después como pdf desde el Illustrator, asi cuando abrimos el Esko Visualizer abrimos ambas cosas desde allí.
El programa contiene también efectos especiales, como darle brillo y etc... para hacerlo más real todo.
De manera que cuando quede el diseño finalizado se tendría que visualizar así.

Curriculum Vitae Dades Estudis acadèmics Formació complementaria Coneixements de programari Idiomes Experiència laboral Personalitat i aficions   Dades Nom i cognoms: Stefanía Silvera DNI: X8306413-D Data de naixement: 14/03/1990 Lloc de naixement: Argentina Nacionalitat: Uruguaya Adreça: C/Chocolate nº 20 Telèfon: 668 123 456 Telèfon: 93 682 55 44 Pàgina web: http://stefi-crn.blogspot.com E-mail: adivinalo@hotmail.com (tornar) Estudis acadèmics: Cicle formatiu de Arts Gràfiques (tornar) Formació complementaria: Artista de orquestra (tornar) Coneixements de programari: Illustrator, Photoshop, Indesing, DW, Quark Express, Wuala, Freehand... (tornar) Experiencia en entorns de creació web com Dreamweaver MX i programes relacionats. Idiomes: Catellà/ Català/ Anglès paraules básiques (tornar) Llengua materna: Castellà Anglès Nivell: Mig Experiència laboral: Interpretació Empresa: La Casona Tasques: Actuació, interpretar, fer espectacles... (tornar) 2 anys Personalitat i aficions: M'agrada escoltar música, ballar, sortir amb els amics, sortir de festa, ordinadors... (tornar) Observacions: Fer cosas noves Carnet de conduir: No

Dreamweaver & Wuala

Antes de nada hemos abierto el Text Edit para poner cualquier texto ejemplo: hola
entonces básandonos en ciertos códigos dependiendo de cual pusieramos la palabra salía en negrita, cursiva, en color. Estos son algunos:

< html >
< head >
< /head >
< body >
para que el texto esté en negrita: < b > < /b >
para convertir el texto en cursiva: < i > < /i >
para darle cualquier color: < fontcolor = "green" > < / span >
< /body >
< /html >

También en vez de poner el color en palabras se puede poner a base de códigos que tienen los colores ejemplo: 000000
Para poner los acentos en este caso "qué":
qu&eagrave: para acento abierto
qu&eacute: para acento cerrado
Entonces una vez hecho el texto o lo que uno desee, le damos a la opción de formato > texto normal y a partir de eso ya se crea correctamente y se guarda como html y listo para subir al navegador.
Hecho esto se sube al wuala de manera que para que todo salga correctamente antes hay que crear ciertas carpetas en nuestra casita de agm2 para que tenga el acceso con el Wuala. Entonces le damos a la casita agm2 y alli creamos una carpeta con el nombre "Web", dentro de esa carpeta crear otra que diga "m2c5w01", allí crear otras dos "Estilos" "Imagenes". En definitiva todo hay que guardarlo dentro de la carpeta "m2c5w01" para que se pueda visualizar en el Dreamweaver y se suba perfectamente al Wuala.
Cuando abrimos el Dreamweaver en la columna de la derecha se tiene que visualizar todas las carpetas que hemos creado y se ha guardado en esta:"m2c5w01", todo lo contrario sucederia sino se hubiera creado esa crpeta en "Web".
Para que se suba el archivo al Wuala se le puede dar a "Guarda como" y con la carpeta "m2c5w01" seleccionada, de esa forma automáticamente se sube al Wuala, cabe también la posibilidad de subirlo dándole a la flechita de la columna derecha, eso va a gusto de cada uno.
Claro que para que el Dreamweaver esté sincronizado con el acceso al Wuala, antes hay que marcar unas opciones.
En el Dreamweaver le damos a la opción de sitio > Administrar sitios > Editar
Pestaña > Avanazadas, y allí desde datos locales en donde pone:
• Nombre de sitio: poner m2c5w01
• Carpeta raíz local: clikar carpeta, y poner esta "m2c5w01" desde la casita de Agm2
• Carpeta predeterminada de imágenes: buscar y poner la carpeta "Imágenes"
Finalizada esta parte nos vamos ahora a Datos remotos.
En acceso: Local/red, en Carpeta remota: clickar carpeta y una vez más "m2c5w01" pero esta vez no desde Agm2 sino desde el archivo Wuala.
Luego clickamos en Mantener información de sincronización y aceptamos.

Y por hoy creo que mi narración a finalizado.

Variaciones en Photoshop

Pasos a seguir de la retícula

1. Trobar la página
2. Trobar la caixa
3. Trobar l'alçada de la columna
4. Trobar la mesura d'una línia
5. Trobar la quantitat de línies inicials de la caixa
6. Trobar les línies que hi ha a cada módul
7. Trobar l'alçada d'un módul
8. Trobar les línies totals de la caiza
9. Trobar l'alçada final de la caixa
10. Trobar el marge inferior de la caixa

Trabajo en grupo

Me ha gustado el grupo que hemos hecho (jenni, Juan, Víctor, Laura, Fatija y yo) ya que nos hemos repartido bien el trabajo sin complejo alguno.
Disfrutamos todo el grupo mientras ibamos haciendo el trabajo, por el simple hecho de que nos hemos entendido todos al habernos distribuido bien el trabajo.
En caso de volver a hacer otro grupo escogeria el mismo sin dudarlo. ;)

Comentario sobre la práctica

Hemos comenzado a hacer los cálculos entre todos, seguido de los diferentes tipos de esbosos creados a nuestro gusto.
La idea consistía en que cada uno de nosotros hicieramos dos páginas por persona basándose en películas desde Indesing, teniamos primero que formar la maquetación y luego hacer la reticula con los resultados del cálculo hecho anteriormente en papel.
Una vez hecha la reticula con sus resultados correctos, cada uno de nosotros tenemos que elegir cualquier pelicula del género que nos agrade e insertar la fotografias de las películas junto con la sinopsis, opinión, duración, actores, etc, todo el contenido de una película.
Una vez acabado todo esto, hay que darle a Archivo > Imprimir y desde allí fijarse bien en las sangres, Formato, etc.
Luego darle a Archivo > Imprimir folleto, que es el retoque final para convertir en PDF.
Una vez acabado se imprime la revista para luego disfrutar de un trabajo bien hecho!