Ramossabrina's Blog


Category Archive

The following is a list of all entries from the Uncategorized category.

Página del Centenario

En esta entrada para despedirme he querido dedicarla a la página web del centenario que nos han mandado como último trabajo.

Esta es mi idea inicial que no la he llevado a cabo porque no hemos tenido demasiado tiempo y porque no sabía cómo realizar algunas cosillas.

La página se debe de estar terminada y subida al dominio de Arsys para poder aprobar la asignatura.

Lo primero que he hecho es el esquema de la web:

Tendrá una página de inicio con un botón “Entrar”, esta página nos vincula a la siguiente principal la cual tiene tres secciones:

  1. Breve historia de la escuela con el centenario.
  2. Eventos: de esta saldrá otra página con los eventos divididos por años, cada año una galería y con cada imagen un enlace al blog del autor.
  3. Contacto, en este apartado aparecerá los datos de la escuela con un mapa de su ubicación.

Aquí os dejo las imágenes de la web del centenario:


Tipografía: Tipometría

Tipometría es la disciplina dedicada a estudiar y medir las formas de las letras. El nombre adecuado es el de carácter, que es bidimensional y se refiere al signo impreso; o sea, al resultado visual de una letra.

Tipo es un bloque con seis caras rectangulares iguales dos a dos.

1. Ojo es la superficie impresora del tipo. No debe confundirse con ojo medio (altura de la x)

2. Talud o prosa es ligero blanco situado a ambos lados del ojo que permite a una letra separarse de sus vecinas.

4. Grosor o espesor es diferente según la anchura d la letra; una i es menos ancha y su espesor menor que el de una m.

5. Cran permite, a lo largo de la composición, colorar todas las letras.

6. Cuerpo es el tamaño de las letras de una fuente y está representado por la cara perpendicular al cran. El tamaño del

 cuerpo se suele expresar en puntos.

3 y 7. Altura del tipo en la tipografía clásica es de 23,56 mm., medida desde el pie hasta el ojo.

Hombro es el espacio que no se imprime, situado por arriba y por debajo del ojo. No debe confundirse con el hombro de la letra.


CSS con Dreamweaver

El CSS es una tecnología desarrollada con el fin de separar la presentación de la estructura del HTML.

 Funciona aplicando reglas de estilo a los elementos HTML, entre las que incluyen, tamaño, color de fondo, color del texto, posición de los elementos, márgenes, tipos de letra, etc… quedando de esta manera toda lo que tiene que ver con la parte gráfica de la web, separada completamente de la estructura del HTML.

 Este lenguaje desarrollado por la W3C, ha venido haciéndose cada vez mas importante entre los diseñadores, gracias a la facilidad de uso y a los óptimos y flexibles resultados. Aprender a conocer CSS nos dará como resultado un mejor flujo de trabajo, mayor organización de nuestro código, menos peso en las páginas, y más flexibilidad a los cambios. Además una vez familiarizados con sus capacidades, nos daremos cuenta de que es más fácil y rápido diseñar con CSS que de la manera antigua.

 Bien, empecemos por el principio. Aquí intentare enseñar cómo hacer documentos validos y que sean bien interpretados por la mayoría  de los navegadores actuales.

Os dejo un vídeo que lo explicará mejor y sigais el orden.

 


Una marca muy peculiar

Una marca muy peculiar.

Esta actividad nos la ha mandado Marisa en la asignatura de Técnicas Gráfica Industriales. Consiste en la creación de una marca corporativa de nuestra propia empresa, en este caso he decidido que elaboraré la marca orientada como empresa de diseño.

En principio realizaremos bocetos previos a al resultado final.

Pensé que sería muy original y único el resaltar la “c” de mi apellido.

¿Por qué?

Pues porque mi segundo apellido es de origen bosnio: Huskic, y lleva acento en la “c” algo que es muy inusual aquí en España. Aquí a las consonantes no te le ponen tildes, así que eso fue lo que quise destacar de mi marca corporativa, hasta que finalmente la quise llamar “c”.

Después de la elaboración de la marca tuve que realizar un manual corporativo el cual contiene los siguientes apartados en el índice:

–          Logotipo

–          Símbolo

–          Marca

–          Versiones positivo, negativo y escala de grises.

–          Variantes

–          Versiones dependiendo del fondo.

–          Colores corporativos

–          Tipografías corporativas

–          Marco delimitador

–          Mínima reducción

–          Aplicación.

En este último apartado lo que nos pedía es aplicar la marca a un folleto publicitario el cual lo pedía impreso.

Reverso/anverso

Interior: página1/página2


XHTML

El HTML es una serie de códigos que se ponen en un documento de texto plano para crear una página web.

En el blog de notas ya creado ponemos un aserie de etiquetas

HTML= XHTML + CSS a esto se le añaden estilos.

Poner un estilo a todo, formato complejo,, es un conjunto de formatos aplicados a una página web.

Formatos de indesign: tipografía, color, tamaño, etc…

Estilos de objeto: CSS: hoja de estilo encascada: fichero en el cual están incrustadas los estilos que se aplican a la web.

Stile.css: para cambiar el estilo de lo que sea de una web.

La tarea a realizar es la creación de un currículum de la forma de un HTML.

Escribir en el blog de notas instrucciones, etiquetas o tag, son instrucciones para el manejador.

Escribir lo siguiente:

<HTML>
               <HEAD>
               </HEAD>
 <BODY>

CURRICULUM
<br>
<img src=”sabri.jpg”/>
<br>
<ol>
<li>Nombre:Sabrina Ramos Huskic
<li>Fecha de nacimiento:23 de Julio de 1986
<li>Lugar de nacimiento: Stutgart (Alemania)
<li>Población: Puerto de Santa Maria
<li>Dirección: Apartado de correos 460                                                                     
<li>Teléfono: 60002590   Fijo: 956 800006
<li>Estado civil: Soltera
<li>DNI: 4OOO67957-Y
</ol>

            </BODY>
</HTML>

Para guardarlo  le damos a archivo guardar, nombre del archivo.htm, seleccionar todos los archivos y en codificación : UTF-8

Si sigues bien las instrucciones te saldrá una cosa así:


Proyecto de Packaging para perfumería femenina

La idea es crear una nueva imagen de producto.
Se trata de lanzar al mercado nacional una marca de éxito rápido para irrumpir en el subsegmentos de Eau de toilette frescas, actualmente en fuerte crecimiento.
Briefing: Proyecto defensivo para evitar el avance de los líderes actuales y frenar la posible resta de consumo de las marcas tradicionales de la empresa. El proyecto debe emplear los mismos códigos de identificación de estas marcas de éxito, a la vez que mejorar los puntos débiles detectados en ellos.
Características del producto:
Fresco, natural, alegre, vital, funcional, clásico, duradero.
Como resumen hay que decir que nuestro producto ha de ser claramente superior a los líderes, y así percibido por la consumidora.
Características que debe transmitir el packaging:
– Feminidad
– Frescura
– Inspirado en lo vegetal
– Que guste tocarlo, sensual
– Con personalidad, original, novedoso
– Simplicidad visual y funcionalidad
– Alegre, vital y juvenil
En resumen, debe reflejar con rotundidad el concepto.
Entrar en la página: www.lovelypackage.com
En esta página veréis trabajos como estas imágenes que muestro a continuación para tomar como ejemplo para el proyecto.

 


Tipografía: Portada de Revista

Una vez creada la marca pasamos a crear según el artículo las portadas correspondientes.
He buscado diferentes imágenes para cada uno de los artículos:

Roy Liechtenstein
Este artículo trata de este señor que fue un artista muy famoso por sus carteles y muy original. Fue el primero que fusionó el pop art con la publicidad en las calles, los carteles.

Arte Urbano: Taxi en Bombay
Este otro artículo trata sobre el arte en la ciudad de Bombay.
El arte sobre todo se encuentra en los taxis los cuales van adornados por completo por pegativas, vinilos.
Cuanto más vinilos tengan en un taxi mayor es el poderío del taxista.

Le 104
Este artículo va de un museo que hay en París en cual explica todas sus características, la señalética usada en su interior, su estructura, la tipografía que usa, etc.… en definitiva todo lo que conforma el museo en sí y la imagen que quiere transmitir.

Dependiendo del color que destaque de cada imagen que he asociado a cada artículo le he puesto a juego un color que mejor le viniese. También he añadido algunos detalles más de color como al código de barras.
He ido reforzando también en la marca el “IN” diferenciándolo con el resto del nombre haciendo hincapié en el que está dentro, en, en el momento, como la revista en si es de la actualidad.


Crear un botón en Fireworks

En este video podremos ver con más claridad como se  puede crear un botón para nuestra página web.
Aprenderás a crear botones para tus páginas web con este programa y junto con Dreamweaver.
Estos botones sirven para enlazarar una web con otra con un solo clik.

Lo primero que haremos es crear un rectángulo (herramientas)
Lo siguiente seleccionamos el objeto y lo convertimos en símbolo: menú modificar opción símbolo, convertir en símbolo, poner nombre del símbolo que le asigno y seleccionar “botón”, aceptar.
Aparece un área verde, área activa del botón.
Propiedades del botón: doble clic sobre el botón, aparecerá un recuadro en el que mostrará los distintos estados del botón, podemos cambiar la apariencia de cada uno de ellos.
Son 4 estados:
– Normal
– Ratón encima
– Ratón encima pulsado (abajo)
– Presionado sin ratón encima (sobre y abajo)
Todo lo que pongamos en el botón deberemos centrarlo.
Copio gráfico en todos los estados, lo único que haré es cambiar el color del botón en cada estado.
Área activa: el área activa del botón, modifico las líneas rojas que serán el área, un área más amplia.
Presionar en el botón listo.
Vista previa: archivo, vista previa, se abrirá el explorador el cual podemos asegurar de que lo estamos haciendo bien.
Para añadir un enlace nos vamos a la parte de debajo de Fireworks y en Vínculo ponemos “www.google.es” así cuando pinchemos en el botón se abrirá automáticamente esa página.


Tipografía: Portadas para revistas

El ejercicio consistirá en la realización de tres portadas para tres números de una misma revista de Diseño y Cultura Visual. Partiremos de tres artículos que nos facilitará la profesora. Éstos formaran parte de la revista y serán motivo de tres portadas, cada una de ellas corresponderá a uno de los mismos. A cada artículo, además, le corresponderá un titular que figurará en las tres portadas.

Lo primero que aremos será un estudio previo de nuestra revista, el briefing:

Orden de trabajo creativo de Saatchi y Saatchi: Target, propuesta única a comunicar, justificación de la propuesta y requisitos e imagen deseada de la marca.

Plan de trabajo creativo de Dorland and Grey: los creativos se deben colocar en el lugar del producto, sentirse producto y contestar:

  1. Yo soy…(producto)
  2. Yo aporto…(beneficios)
  3. Mi carácter es…(personalidad)
  4. Yo intereso a…(target)
  5. Gracias a… (reason why?, ¿porqué?)

Una vez ya encaminada nuestra revista le daremos un nombre a nuestra revista:

Urb-Art, Univrs-Art, Chic- in- art, Exotic- art, Uni- art, KM Art, Willy- Art, Travel- Art, Non- Stop- Art, Tic- Art, Km Design, Tic Design, Chic- In – Design.

Finalmente me decidí por Chic- in –design.                               

En Illustrator observe diferentes tipografías hasta que di con la idónea, Bauhaus 93, regular.

También jugué con la tipografía alargando la “G” para crear más juego en la composición. Finalmente esta es mi marca:

Varía de color según la imagen, pero siempre con colores planos, saturados y muy llamativos, ejemplo:


Mi primera página web

Para crear una página web lo primero que haremos es realizar una copia de nuestro blog, es decir, un pantallazo.

El pantallazo lo llevamos a Photosop y ahí hacemos una capa por cada división del blog. Haremos un rectángulo para la cabecera, otro para la entradilla y otra para la principal, añadimos algunas secciones más y lo guardamos como .png.

Ya tenemos la estructura base de nuestra página.

Muy importante crear una carpeta llamada TRABAJO en la que contenga una carpeta que ponga IMÁGENES (se guardan todas las imágenes que usaremos en Fireworks) y otra IMP (se guardaran los archivos png. De Fireworks).

Abrimos el programa Adobe Fireworks, en este caso yo tengo el CS4, y desde aquí abrimos la página creada anteriormente en Photoshop, una vez aquí lo que aremos es seguir las secciones dividiéndolas con la herramienta división, no hace falta que las hagamos todas, solo haremos la cabecera, entradilla y la principal.

Una vez hechas las divisiones lo que aremos será ir a Photoshop de nuevo y crear una miniatura con algunas imágenes, para ello le daremos a ARCHIVO, AUTOMATIZAR, HOJA DE CONTACTOS II, de esta forma agruparemos una serie de imágenes haciendo una miniatura la cual pasaremos a Fireworks, concretamente al recuadro de la izquierda (Archivo, Colocar).

Ahora seleccionaremos la herramienta división interactiva e iremos haciendo cuadritos que contenga cada imagen por individual. Una vez hechas cada una aremos también un recuadro en la principal en grande. Seleccionamos en una imagen de las pequeñas y damos al segundo botón Añadir comportamiento, y lo asociamos al recuadro de la página principal, así con todas.

Para guardarlo tendremos que exportarlo en HTML  de esta forma te saldrá un archivo de internet Explorer el cual podrás comprobar que si seleccionamos alguna imagen de la entradilla saldrá en la principal en tamaño mayor.