Diseño Web – Tutorial Photoshop


Paso 1

Crear un nuevo documento 960 píxeles por 1000 píxeles y RGB. Extraer algunas guías para marcar los límites e ir a Imagen> Tamaño de lienzo para cambiar el tamaño del documento de toma de ancho de la tela “más grande (1460 x 1000 px). De esta manera usted tendrá su diseño centrado en un documento grande y ver cómo se ve en las resoluciones de pantalla ancha. También, elaborar una guía para marcar la altura del encabezado.

Paso 2

Dibuja una guía horizontal en el centro del documento y utilizarlo para llenar el “fondo” de la capa con un color azul oscuro degradado radial (# 0D2B53 – # 010D1F). También estoy agregando algunas guías como los límites del relleno de la página principal de la izquierda y la derecha. Es muy posible que vamos a cambiar la altura del documento más adelante, por lo que añadir una nueva capa de relleno (# 010D1F) por debajo de nuestro “fondo” de la capa.

Paso 3

usaremos imágenes reales en lugar de las nubes filtro clásico. Pegue esta imagen de algunas nubes de tormenta en una nueva capa llamada “Nubes” y cambiar su modo de mezcla de superposición. Luego ir a Capa> máscara de capa> Ocultar todo, y dibujar un degradado radial de blanco a negro (# FFFFFF – # 000000), que va desde la parte superior media a casi la mitad inferior. A continuación, ajuste el “Nubes” niveles un poco para que las nubes más oscuras.

Paso 4

Ahora pega este horizonte de Niza de una playa española en una nueva capa llamada “horizonte”. A continuación, cree una nueva capa de ajuste> Mezclador de canales … y seleccione Blanco y Negro con filtro azul (RGB). Luego de aplicar en este sentido sólo para el “skyline” de la capa en la paleta de capas, mantenga pulsada la tecla Opción y haga clic entre la capa Mezclador de canales y la capa de “horizonte”. Por último, cambiar el “skyline” de la capa de mezcla a modo de superposición.

http://psd.tutsplus.com/tutorials/interface-tutorials/photoshop-web-design-night-theme/

Paso 5

Aplique una máscara de capa> Descubrir todas a la “skyline” de la capa. Luego, utilizando un gran y negro (# 000000) brocha suave para ocultar los bordes de la imagen, a continuación, seleccione un pincel Grunge (estoy usando este cepillo de Grunge establecidos por Kelzky13 , especialmente cepillos 250 y 181) y hacer que los bordes un poco más irregulares.

Paso 6

Ahora escriba el título de “Magic” con la fuente Scriptina. A continuación, aplique los estilos de capa se muestra a continuación: un resplandor exterior (# 9EB6D0) y un gradiente de superposición (# 70ABF6, # FFFFFF, # B4CBE7, a # FFFFFF). Además, ahora es un buen momento para organizar el diseño de nuestro desarrollo en carpetas. Ponga todas las capas en una nueva carpeta llamada “Fondo” y el texto dentro de otra carpeta llamada “Logo”.

Paso 7

Ahora vamos a añadir algunas estrellas a nuestro diseño, se puede usar cualquier cepillo conjunto de estrellas, pero estoy usando esta serie: campo de cepillos estrellas por BL1nX . Luego, utilizando el pincel 550 de la serie, pintar las estrellas en blanco (# FFFFFF) en una nueva capa dentro de una carpeta llamada “Stars”. Tenga en cuenta que me estoy poniendo la estrella más brillante en el punto de la i. A continuación, aplicar un gradiente de superposición con tres colores (# 3A8FEF, # FFFFFF y # 66C9FC) a la “Stars1” capa.

Paso 8

A continuación, utilizando el pincel 615 del campo de estrellas establecidas, añadir más estrellas que el cielo en una nueva capa llamada “Stars2,” y luego con un paño suave goma de borrar, eliminar las estrellas en los edificios. A continuación, agregar un resplandor exterior (# 8AB2FF) para “Stars2”.

Paso 9

Añadir más estrellas a la “Estrellas 2” de la capa en todo el diseño, a continuación, utilizando la herramienta Borrador, eliminar algunas áreas de las estrellas. Por último, aplicar un efecto de superposición de degradado a “Stars2” capa, usando cuatro colores: 6AB1D1 #, # FFFFFF, # 94CFED, y # FFFFFF.

Paso 10

Ahora descargar estos pinceles estrellas por jen-ni y mantener las escobillas de mano, porque vamos a utilizar varias veces en este tutorial. Seleccione un cepillo px 65 (estoy usando el número 148) y dibuje un blanco (# FFFFFF) estrellas en una nueva capa justo por encima del punto de la i. A continuación, aplicar un resplandor exterior (# 00BCF9) a la estrella para que sea más brillante.

Paso 11

Duplicar la “magia” del texto, seleccione el texto, y escriba la palabra “noche” en su lugar. A continuación, establecer el Resplandor exterior a blanco (# FFFFFF) y la superposición de degradado de tres colores (# F9DA5B, FEAE00 # y # FFD403), ver la imagen a continuación para verificar el filtro de los valores.

Paso 12

Vamos a añadir algunas nubes a nuestra noche! Descargar redheadstock de nubes II pinceles. A continuación, seleccione el número de cepillo 2464 y establecer su tamaño a 960px (anchura de juego principal de la presentación del diseño). Ajuste el color a # 234B7F y pegar una sola nube en una nueva capa llamada “cloud1”. Para mantener las capas organizada, me estoy poniendo las nubes en una carpeta separada dentro del “fondo” carpeta. Ahora estire el “cloud1” altura un poco.

Paso 13

A continuación, Dodge y Burn de la nube un poco. Tenga en cuenta que soy un rayo las zonas próximas a la estrella logotipo y oscurecimiento de la parte inferior de la nube. Además, cambia la “cloud1” Opacidad al 50%.

Paso 14

Añadir una nube más en una nueva capa llamada “cloud2”. Usted puede utilizar cualquier nube que está buscando, pero el uso de este color como un primer plano: # 5F83A5. Dodge la parte inferior de la nube un poco para mejorar la sensación de iluminación.

Paso 15

Repita el paso anterior pero esta vez con otro cepillo con este color: # 36638C y colocarlo encima de la “cloud1”. Cambiar su tamaño, a continuación, Dodge y / o grabación de la nube si es necesario.

Paso 16

Seleccione una gran goma de borrar blanda y eliminar la parte inferior de la “cloud1” capa para crear un efecto de fade out.

Paso 17

Esto es realmente un paso fundamental, vamos a agregar el fondo contenedor principal, nunca hay que olvidar que está diseñando para la web. Con la herramienta Rectángulo, dibuje un rectángulo de vectores (# 0A1D37) en una nueva capa debajo de todas las “nubes” carpeta. Tenga en cuenta que mi rectángulo está dentro del relleno de las guías. A continuación, seleccione la capa rectángulo e ir a Capa> Máscara> Mostrar todo … y dibujar un gradiente de blanco a negro, que añade un buen efecto en la parte superior del rectángulo. Por último, la caída de una Guía por debajo del rectángulo de fundido de entrada, que nos ayuda cuando pasamos este diseño en HTML + CSS. Comunicación, que a partir de la guía para la parte inferior del color de fondo debe ser liso.

Paso 18

Ahora añade otro rectángulo pero esta vez como la barra lateral de fondo, de nuevo ayudarse a sí mismo con una guía, y el uso del color # 091525. Luego, se aplican al nuevo rectángulo una máscara de capa un poco al igual que en el paso anterior.

Paso 19

En este punto, tenemos el fondo de la cabecera básica hecho. Ahora es el momento de añadir algunos detalles. Voy a poner un único icono de RSS en la cabecera. Copia esta imagen de la luna llena y pegarlo en una nueva capa llamada “luna-rss”. A continuación, modifica el Tono / Saturación para hacer la luna un poco más amarillo, y agregar tanto interno y filtros Resplandor exterior (ver los valores que aparecen más abajo).

Paso 20

Agregar una forma pequeña nube con el color # 7997B3 en una nueva capa por encima de la luna en la paleta de capas. Luego, utilizando una gran goma de borrar suave, eliminar algunas áreas de la nube de nuevo.

Paso 21

Añadir el RSS de forma clásica (# DCA30B) en una nueva capa en la parte delantera de la “luna” de la capa, pero detrás de la “nube” de la capa. A continuación, se le aplican los filtros de abajo (una superposición de degradado, un resplandor exterior y una gota de sombra). Por último, agregue una estrella en algún lugar sobre la forma de RSS (vea el paso 10).

Paso 22

Pegar la imagen en una nueva capa, vamos a utilizar como fondo de nuestras páginas barra de navegación principal. Dado que la imagen original es un poco estirado, tenemos que hacerla más amplia, he jugado con ambas selecciones y el movimiento (Transformación libre) herramienta para aumentar el desplazamiento de ancho. A continuación, la deformación de desplazamiento un poco con la urdimbre de la bandera.

Paso 23

Dodge algunas zonas de la voluta para aumentar las sombras y para mejorar la ilusión de la urdimbre.

Paso 24

Para mejorar el desplazamiento de la textura, aplicar una superposición de degradado filtro (045F96 # y # FBF4BD) y una superposición de patrones también.

Paso 25

Ahora agregue una gota de sombra a la de desplazamiento. Usted puede utilizar el filtro Sombra o hacer lo que hice, duplicar la capa de desplazamiento, y en Tono / Saturación ajustar el aligeramiento a -100, Blur la copia negro un poco y distorsionar con la herramienta Transformación libre para que sea irregular.

Paso 26

A continuación, agregue una nube sobre el libro, Dodge, Grabar y Eliminar al igual que en el paso 15. A continuación, agregue el texto del enlace Páginas usando Georgia – fuente en cursiva. Utilice el color # 0B1827 de los enlaces estándar, y el color # 211808 para el enlace de vuelo estacionario. Además, agregue algunos detalles adicionales como las estrellas en el fondo y una línea como el efecto hover.Usted puede ver la estructura de las capas en la parte inferior de la imagen de abajo.

Paso 27

Como detalle final de la barra de navegación de las páginas, crear una nueva capa sobre el libro y con un cepillo las partículas, trace una línea como lo es una acuarela (ver imagen abajo). Hazlo unas cuantas veces más, pero con colores diferentes. Además, por la barra de navegación de “Estrellas” opacidad por debajo del 40%.

Paso 28

Agregue el texto relacionado con el RSS. Estoy utilizando el 10 px Aria, con el amarillo (# F2C90D) y blanco (# FFFFFF). No se olvide de establecer el método anti-aliasing en Ninguno, porque la mayoría de los navegadores hace que el texto sin ningún tipo de anti-aliasing (IE7 y Safari son las excepciones).

Paso 29

Como un detalle adicional añadir esta imagen de un globo bonito. Extraer el globo de su fondo y colocarlo en algún lugar debajo del logotipo, agregar un color de superposición (# 1F416E – Modo de fusión: Superposición) para el “globo” de la capa para que coincida con los colores de la escena. Además, puede grabar el lado izquierdo del globo es sólo un poco.

Paso 30

A continuación con el pincel 615 de los cepillos campo de estrellas (añadir más estrellas por encima del balón y el desplazamiento. También estoy agregando un acorde con el balón en la pintura una línea curva blanca con un pincel de 3 px sólidos. Asimismo, el uso de la goma de borrar, aquí y allá para reducir la cantidad de estrellas.

Paso 31

Es el momento de añadir un puesto. En primer lugar, añadir el título y la fila de los metadatos en una nueva capa llamada “Post”. Ver la imagen de abajo para ver los valores de caracteres. Además, estoy agregando una pequeña estrella cerca de los metadatos como un detalle visual.

Paso 32

Vamos a añadir más información en el “Post” carpeta, ya que la lista en la página web tendrá una vista previa del mensaje varias. Vamos a añadir una imagen de previsualización a la izquierda (200 px por 200 px con un efecto de trazo 1px) y un breve texto de la derecha. Además, vamos a añadir una vista previa de cómo muchos comentarios el puesto tiene en la parte superior derecha. Para el campo de comentarios, crear una nueva carpeta llamada “Comentarios” y añadir un fondo pequeño con una nube de pequeñas y algunas pequeñas estrellas. Básicamente, sólo tiene que repetir uno de los pasos anteriores, cuando estábamos diseñando el encabezado, pero en una medida pequeña. Luego agregar el número de observaciones y los comentarios la palabra a continuación.

A continuación, agregue una línea de etiquetas por debajo del mensaje y agregar una pequeña estrella a la derecha de esa línea. Agregar un campo de estrellas poco como un fondo para el puesto, sólo si así lo desea. Finalmente, dibuje un separador (# 1D324F) para el puesto con la herramienta Línea.

Luego duplica el “Post” carpeta y editar las copias para crear dos o tres puestos diferentes. Es muy posible que la altura de su documento es necesario aumentar en este momento, sólo lo hacen utilizando la herramienta Recortar o Imagen> Tamaño de lienzo, sobresalen como en el paso 1. Cuando se ha cambiado el tamaño de su documento principal, aumentar la altura de ambos el fondo principal y el fondo barra lateral también.

Paso 33

Vamos a trabajar en la barra lateral ahora. Vamos a agregar el formulario de búsqueda. Crear una nueva carpeta llamada “Barra lateral” y dentro de ella crear otra carpeta y el nombre de “Buscar”. Dibujar una nube en esa carpeta y esquivar y fresa para hacer que se vea como la imagen siguiente. Luego, utilizando la herramienta Rectángulo redondeado, dibuje un rectángulo sobre la nube. Aplicar un efecto de trazo 1px interior (# 697372) al rectángulo y cambiar su valor de relleno a 50%.

Paso 34

Agregue un poco de estrellas blancas por encima de la capa de nubes de usar cualquier capa de campo de estrellas, recuerde borrar todas las estrellas adicionales. Luego duplica, reducir y Edición> Flip horizontal del “globo” de la capa del paso 29. Póngalo en la “búsqueda” de carpeta. Además, agrega el texto del título con Georgia en cursiva y de color amarillo agradable (# D5A934) de color. A continuación añadimos las instrucciones de búsqueda y el botón “Go!”. Usted puede ver el carácter de los valores en la parte inferior de la imagen siguiente. Como detalle final dibujar una estrella brillante detrás del texto.

Paso 35

Agregue el texto contenido secundario, títulos, enlaces y poner a cada sección en una carpeta separada.Además, agregue un fondo de estrellas de campo suave en cada carpeta y una estrella brillante detrás de cada título. Además, agregue una estrella brillante como un ejemplo del efecto de suspender en cualquier enlace. No se olvide de tanto relleno y guías de márgenes.

Paso 36

Estamos llegando al final. Vamos a añadir un pie de página de la barra lateral. En primer lugar, se desvanecen un poco de la parte inferior de la pintura de fondo de la barra lateral con un cepillo suave en su máscara de capa. A continuación dibuje una pocas nubes, a continuación, Dodge y Burn ellos.Asegúrese de que las nubes no invaden el fondo el contenido principal o sobrepasen el ancho de la barra lateral. A continuación, agregue un campo de estrellas blancas detrás de las nubes y duplicar el balón una vez más. Estoy ahorrando todo esto en una carpeta llamada “Barra lateral Pie”.

Paso 37

Por último, vamos a crear el pie de página. En primer lugar en la máscara de la capa de fondo el contenido principal con un pincel grande y suave, ocultar la parte inferior para que desaparezca. A continuación, seleccione algunos pinceles y pintura nube de todos ellos en la parte inferior del diseño. Soy la combinación de azul oscuro grande (# 0B1C38) nubes y pequeños azul # 223E63 nubes), como se muestra en las imágenes de abajo. Recuerde que las nubes se convertirá en una imagen de fondo, así que trate de no cruzar la Guía entre el contenido y el pie. Además, recuerde que debe poner todas las capas relacionadas con el pie de página en una nueva carpeta llamada “pie de página.”

Paso 38

Grabar el más ligero de nubes. Luego, pintar un campo de estrellas blancas utilizando cepillo de 615 de las estrellas establecidas. A continuación, pintar un campo de estrellas brillantes con un cepillo diferente, en este caso el número 656 de la serie. Por último, elimine el campo de estrellas con una goma de borrar blanda grande.

FINAL

Anuncios

manual de identidad corporativa de IMART


El manual de identidad corporativa recoge los elementos constitutivos de la identidad visual de una empresa, pautas de construcción, el uso de las tipografías y las aplicaciones cromáticas de la marca. La consolidación de la nueva imagen de Imart necesita de una atención especial a las recomendaciones expuestas en este manual, como documento que nos garantiza una unidad de criterios en nuestra comunicación y difusión publica.

El manual de la marca debe ser por tanto una herramienta viva y presente en todas las aplicaciones de la marca corporativa y su convivencia con los productos. Las directrices que contiene este documento no pretenden, de ninguna manera, restringir la creatividad de la empresa, sino, ser una guía que abra nuevas posibilidades creativas de comunicar la esencia de la marca.

1. La Marca

Imart es una empresa única, con una personalidad única. Nuestro estilo de comunicación visual debe ayudar a transmitir el compromiso, la promesa que hacemos a cada una de nuestras audiencias.

Se ha creado para Imart una imagen corporativa que contiene todos los valores que queremos expresar a través de la marca.

Liderazgo
Para potenciar las fortalezas existentes en la organización y desarrollar nuevas capacidades orientadas al servicio y al cliente.

Proximidad
Ofreciendo a los clientes un trato personalizado, humano y cercano, sintonizando con sus expectativas y estilos de vida, mostrando en todo momento una vocación de servicio.

Compromiso
Con el bienestar de los clientes, a través de una excelente calidad de servicio y de productos cada vez mejores.

Modernidad
Para ofrecer siempre una imagen, fresca, limpia y actual. Adecuada para una empresa del sector de la imagen y comunicaciones.

Una marca bien aplicada es la base más sólida sobre la que se genera adhesión, rápida identificación y vinculación con un proyecto de futuro.

           

2. CONSTRUCCIÓN Y APLICACIÓN

La marca comercial IMART nace de la unión de las

palabras “imagen”y“arte”.

La forma principal es la propia palabra de la marca, una tipografía gruesa y sencilla de formas, da al logotipo una fortaleza que transmite liderazgo. La sencillez de sus formas le aportan, proximidad y compromiso como valores añados. Al mismo tiempo la unión de caracteres y detalles personalizados, construyen una tipografía personalizada, que aporta a la marca una identidad propia y modernidad, fundamental para perdurar al paso del tiempo.

Al logotipo principal puede acompañarle en distintas formas el símbolo de IMART.

Este símbolo se presenta como un elemento sencillo de formas suaves y estilizadas. Etimológicamente el significado del símbolo viene dado por la representación de dos letras “J“ referente al nombre propio de los dos socios fundadores de la empresa.

Al logotipo se le puede acompañar por el identificador corporativo, este añade a la marca los servicios generales de la empresa, “Imagen y Comunicación”.

El logotipo puede presentarse en diferentes formas, de forma sencilla, acompañado del símbolo de Imart, acompañado por el identificador y acompañado por ambos.

Además puede utilizarse una versión del logotipo para promoción de dirección web de la empresa “www.imart.es”, en la que se añade al logotipo sencillo el “.es”

MODULACIÓN

EL logotipo de Imart, se inscribe en una superficie modular de proporciones 12×4.

El valor “X” establece la unidad de medida. Así, aseguramos la correcta proporción de la marca sobre cualquier soporte y medidas.

AREA DE PROTECCIÓN

Se ha establecido un área de protección en torno al logotipo. Este área deberá estar exenta de elementos gráficos que interfieran en su percepción y lectura de la marca.

La construcción del área de respeto queda determinada por la medida “X”, de Siempre que sea posible, es preferible aumentar al máximo este espacio separando el logotipo del resto de elementos de la página (textos e imágenes).

TAMAÑO MÍNIMO DE REPRODUCCIÓN

Se ha establecido un tamaño mínimo de reproducción offset de 15 mm. de largo y de 18mm. para serigrafía. Para reproducción en pantalla se aconseja un tamaño mínimo de 100 pixeles de largo.

En sistemas con bajos valores de reproducción, (relieves, grabados…), se aconseja un mayor tamaño, atendiendo a criterios técnicos del sistema de reproducción y de legibilidad.

Para la forma compuesta del logotipo estos valores aumentan a 18mm para offset, 20 mm para sergrafía y 120 px para soporte digital

3. EL COLOR

El color define un escenario de valores emocionales concretos que debemos considerar en su aplicación a cualquier soporte de comunicación.

El color principal del logotipo y símbolo de imart, es el color rojo (Pantone 1805). Utiliza también como color secundario para el identificador y versión web un gris (Pantone Cool Gray 10), con una variante gris claro para fondos oscuros (Pantone Cool Gray 4)

4. TIPOGRAFÍA

La familia tipográfica corporativa de Imart es la Myriad Pro. De uso en toda la comunicación interna, señalética y comunicación externa.

Se eligió esta tipografía por su claridad, modernidad y buena legibilidad.

5. USOS NO CORRECTOS

Se recomienda un especial cuidado en evitar usos no correctos que afectan a al imagen de la Identidad Corporativa

6. PAPELERÍA

                     
          


Pasos para diseñar un logotipo


El proceso de creación de un logotipo suele ser muy largo y complicado, en la mayoría de los casos, pero siempre se resumen algunos procesos estándares, a continuación describiré según lo que he podido leer y aprender a lo largo de algunos años diseñando logotipos.

1. Estar bien informado ayuda a tomar decisiones, una vez hablando con el cliente lo mas probable es que te aclare las ideas sobre lo que quiere y desea, siempre que las preguntas y los temas de conversación estén directamente ligados a la esencia de la empresa u organismo, algunos cuestionamientos obligados son: ¿Qué quiere proyectar?, ¿A quién va dirigido?, ¿En qué medios se va a reproducir?, ¿Qué nombre llevará? , etc. Tener el nombre desde el principio es muy importante porque este puede ser el que defina la esencia del logotipo o ayudar a perfilar el diseño prestándose a una composición tipográfica (no todas las identidades tienen que estar acompañados de un gráfico o isotipo)

 

2. Toda idea debe ser plasmada en papel primero, bocetando a lápiz todas las ideas relacionadas o ligadas al nombre proporcionando, hay que agotar todas las posibles vertientes, hay que expresar todas ideas que se generen, se bocetan también las posibles formas y estilos tipográficos que se podrían utilizar, este proceso nos ayuda a filtrar conceptos y separar las buenas ideas de las no tan buenas y a comenzar a darle forma a los pensamientos tan sueltos y divergentes. Depende mucho de la importancia del proyecto pero a veces hacemos de 10 a 50 dependiendo del nivel de inspiración, se debe colocar en algún lugar muy visible donde se pueda depurar aquellas que comiencen a perder funcionalidad, este filtrado debe ser muy consiente y a la vez tedioso porque debe terminar por ofrecerte 5 propuestas concisas y muy buenas.

3. Por primera vez debe participar la computadora en la creación del logotipo, muchos diseñadores modernos creen que la computadora es tan buena y practica que mejor hacer el logotipo desde el principio allí, pero lamentablemente esta falacia esta muy extendida, como puedes haber visto la computadora no ha participado de este proceso sino solo como fuente de información, recién aquí podremos comenzar a jugar con combinaciones de las ideas seleccionadas (tipografía y forma) y tenemos la ventaja de que podemos realizar muchas combinaciones y muy seguidas. En esta etapa se empieza por no aplicar color, solo manejar forma, por allí empezar a probar algunos colores pero no darle tanta importancia, es preferible trabajar en blanco y negro sólidos, es definitivo que si un logotipo funciona en cualquier color, además nos sirve de que nos enfocamos en el mensaje del logotipo y no gastamos energías en buscar una paleta de colores, cosa que haremos después.

4. Al final deben quedar 3 propuesta y una menos ni una mas, entonces buscamos las combinaciones de colores o el color apropiado para acoplarse al diseño y adaptarse al mensaje que se desea emitir, muchas veces se debe trabajar con colores que ya están ligados a la imagen de la empresa o servicio, para esto el cliente debe haber visualizado y dado sus apreciaciones sobre los logotipos seleccionados y trabajados en blanco y negro. Siempre se debe estar mostrando los avances al cliente para mantenerlo satisfecho y mostrarle que estamos trabajando en su proyecto.

Otros: Los logos con brillos, sombras y efectos en general los uso como “variaciones” de los logos oficiales, que generalmente son en plastas. Aquí tiene mucho peso el uso final del logotipo, pero creo que siempre hay que volver a las bases del diseño de identidad y hacer logos fáciles de reproducir, que se vean bien en tamaños reducidos y esas cosas del diseño tradicional.

Criterios para crear un Logotipo


Muchas veces es tentador tener un diseño de logo que se vea a la moda en el momento, pero el problema es que ése logo pasará de moda rápidamente. Esto lleva a que el logotipo tenga que ser constantemente rediseñado. No es recomendable cambiar un logotipo a menos que sea muy necesario. Un logo en constante cambio no llega nunca a fijarse en la mente del público. Solo después de que los consumidores vean con regularidad el logo comenzarán a notarlo.

Continuamente nuevas compañías adoptan un estilo de logo muy similar a otras empresas. Esto lleva a que ningún nombre se diferencie del resto. Un logo design debe ser atractivo para aquellos que no están familiarizados con la empresa. Esto quiere decir que se deben llevar a cabo pruebas del logo: se debe realizar un estudio de campo encuestando a la gente acerca de qué es lo que piensan de la imagen de la empresa y qué emociones experimentan cuando la ven.

Si el logo design no es comprensible o el público cuando lo ve obtiene una impresión equivocada sobre la actividad de la empresa, entonces el logo no es efectivo.

¿Quién es el mercado meta? ¿En qué lugares, además del sitio de Internet, se mostrará el logo? ¿En la papelería membretada, tarjetas de presentación? ¿El logotipo transmitirá el mismo mensaje no importa en dónde se coloque? Un logo debe ser simple, sin complicaciones para poder ser fácilmente incorporado por el subconsciente de los consumidores.

Logotipos complejos combinados con 10 diferentes colores son atractivos algunas veces, pero no es nada práctico. Muchas veces el logo va acompañado de un slogan. Si el slogan está siempre incluido en el logotipo o en la misma forma gráfica, éste puede ser considerado parte del logo.

El principal propósito del slogan, junto con el logotipo, es respaldar la identidad de la marca. La diferencia entre el slogan y el brand slogan, es que el brand slogan contribuye en la construcción de la imagen de la marca, mientras que los diferentes slogans están conectados con los distintos productos o campañas publicitarias.

También debe considerarse el nivel de recepción del logo que experimenta el receptor. Puede decirse que este nivel es semántico: porque ha de poseer un significado determinado, y a su vez permite llevar una cadena de significados; y también es estético: la forma del logotipo. En el mercado actual, lanzar una marca es un proyecto a largo plazo que altera el orden y los valores existentes.

En el momento de crear una marca se debe tener en cuenta que ésta debe ser:

Simple:
limpia, fácil de escribir. Algo complicado o profundo no es apropiado para la identidad de la marca.

Práctica:
va de la mano de la simplicidad. El logo debe ser apropiado para ser utilizado en todo tipo de medios: TV, impresos, uniformes, etc.

Consistente:
un buen proceso de creación de marcas debe ser reflejado en cada una de las piezas de comunicación hechas por la compañía, así como cada uno de los elementos en el diseño: logo, fotografía, paleta de colores usada, etc. Nunca verá un color rosa o naranja en una Coca-Cola, un tipo de letra diferente en McDonald’s, etc.

Único:
no tiene caso tener una imagen excelente o un nombre sobresaliente si se ve muy similar al de alguien más, especialmente si la otra marca tiene más presupuesto invertido en publicidad.

Memorable:
si se aplican los puntos anteriores, probablemente la marca será memorable. La coloración es un elemento importante, por lo general el elemento más fácil de recordar de una marca es el color. Otro tipo de símbolos o códigos pueden ayudar a recordar una marcas: por ejemplo, McDonald’s utiliza la combinación rojo/ amarillo, la “M” en forma de arcos, la figura de Ronald, etc.

Un reflejo:
debe reflejar los valores y objetivos de la empresa. Si la compañía representa calidad, entonces los colores, estilo y fotografía deben reflejar esto también. Si la compañía representa Caridad, pues el logo no es tan complicado, ya que muchos logos que representan esto tienen algún elemento del ser humano.

¿Cuáles son los valores de la marca? ¿Sería usted capaz de adivinarlos al ver los elementos visuales? Una marca creada correctamente, que respetó las normas que se necesitan para lograr un resultado eficaz, no solo refleja los valores, los promueve.

Adaptable:
debe adaptarse al mercado meta. No muy moderno para consumidores conservadores, no muy conservador para mercados modernos.

Sustentable:
contemporáneo, pero algo clásico. Una gran cantidad de marcas actualiza sus logotipos cada 20 años. Es por esto que es importante tener un concepto que no se vuelva obsoleto en poco tiempo.

Una identidad corporativa bien realizada no es un simple logotipo. Es necesario mantener una coherencia visual en todas las comunicaciones que una empresa realiza; folletos, papelería, páginas web, etc. La identidad corporativa de una empresa es su carta de presentación, su cara frente al público; de esta identidad dependerá la imagen que la gente forme de dicha organización.

Diseñado por Sir Peter Scott, in 1961.

Diseñado por Pentagram, in 2000.

Diseñado por Peloton Design, in 2005.

Diseñado por Johnson Banks, in 2003.

Diseñado por Raymond Loewy, in 1971.

Diseñado por Edward Young, in 1935.

Diseñado por Yataro Iwasaki, in 1870.

Diseñador por Sam Dallyn, in 2001.

Diseñado por Edward Johnston, in 1918.

Diseñador por Deepend, in 1999.

Diseñado por Herb Lubalin, in 1980

Diseñador por Tayburn, in 2004.

Diseñador por Bayer, in 1904.

Diseñado por Regis McKenna Advertising, en 1977.

Diseñador por Siegal & Gale, en 1977.

Instalación de PhpBB en Xampp




Si estas pensando en agrandar tu pagina web y aumentar su funcionalidad, la mejor manera de hacerlo es con un foro donde tus usuarios puedan participar y tengan un motivo para volver a tu pagina.

Instalar un foro no es difícil, menos aun los que son prefabricados como phpBB3. Eso si, antes de continuar tienes que asegurarte de tener:

  • Soporte para PHP, debe soportar una versión mayor la 4.3.3
  • Soporte para base de datos MySQL
  • Acceso a los archivos de tu hosting (si estas en un hosting pago seguro lo tienes)
  • Permiso para cambiar los permisos de tus archivos (valga la redundancia jeje)
  • Paciencia
  • Si tienes todo eso, entonces comencemos con la instalación del foro phpBB3.

1-. Lo primero que haremos es descargar el foro desde phpBB.com (http://downloads.sourceforge.net/phpbb/phpBB-3.0.0.zip?download) o nos direccionamos a www.phpbb.com/downloads

2-. Una vez que tengamos el archivo phpbb/phpBB-3.0.0.zip en nuestra computadora lo descomprimiremos y lo subiremos a nuestro hosting en el directorio /foro por ejemplo.

3-. Bien, ya tenemos el foro arriba, lo que toca ahora es instalar y configurar, para eso vamos a la carpeta de instalación dentr de donde subimos el foro, sería en /foro/install, si todo es correcto deberiamos ver una imagen como esta:

Si podemos verla, hacemos clic en “INSTALL” como esta en la imagen.

4-. Una vez que hayamos hecho clic en install, nos llevara a otra pantalla donde nos dará la bienvenida. Bien, ahora deberemos asegurarnos de que todos los archivos y carpetas tengan los permisos adecuados:

  • cache/: 777
  • store/: 777
  • files/: 777
  • config.php: 777
  • images/avatars/upload/: 777
  • Una vez que hayamos cambiado los permisos, haremos clic en “PROCEED TO NEXT STEP”, en español sería “IR AL SIGUIENTE PASO”:

5-. Si cambiamos los permisos correctamente, ahora veremos esta pantalla donde haremos clic en “START INSTALL”:
Si vemos que alguno de los archivos dice “Unwritable” es porque no cambiamos bien los permisos.

6-. Ahora veremos una pantalla donde tendremos que introducir los datos de la base de datos que creamos para el foro (servidor, usuario y contraseña), si todavía no lo hicimos, este es el momento. Una vez que pusimos los datos, hacemos clic en “PROCEED TO NEXT STEP”:

Si todos los datos que introdugimos fueron correctos, ahora veremos un mensaje en verde que dice succesful connection y un boton que dice “PROCEEDE TO NEXT STEP” donde haremos clic (si es así volvemos al paso anterior):

7-. Ahora toca configurar la cuenta del administrador del foro, eligiremos el nombre de usuario, contraseña y email:

8-. Como en el paso anterior, si todo fue bien veremos un mensaje en color verde diciendo Tests passed y un boton que dice “PROCEED TO NEXT STEP” donde haremos clic:

9-. LISTO!, si vemos esta pantalla:

ya tenemos un foro phpBB3 instalado en nuestro servidor y listo para comenzar a participar junto con los usuarios de tu pagina web.

Una ayuda para definir cuanto cobrar por un trabajo


Muchas personas me han pedido reiteradamente ayuda para definir sus precios, lo que siempre les recomiendo es una formula simple y empieza por determinar la cantidad de elementos a ser creados, utilizados, diseñados o manipulados dentro del diseño.

Entonces determines como primer paso una lista con todos los requerimientos de elementos visuales de que sean utilizados en el diseño, posteriormente, determines los niveles de complejidad sean baja, media o alta determinando un tiempo de realización para cada nivel. por ejemplo, si es baja digamos 1 hora, si en media 3 horas y si es alta digamos 6 horas, de esa forma multiplicando la cantidad de elementos por el nivel de dificultad asignado tendremos un tiempo en horas.

Por ultimo, a ese tiempo en horas lo multiplicamos por el valor de cada hora de trabajo, para eso vale mucho determinar la experiencia, el nivel adquirido, el reconocimiento dentro del mercado y la trascendencia en otras marcas. finalmente a esto se le agregaría una ganancia total por trabajo y costo por maquina. Vale hacer la aclaración que todo lo que no creemos debe ser aportado y entregado por el cliente y si tenemos que recurrir a terceros los costos de estos deben ser también cubiertos por el cliente.

Como para muchos aun esta formula sencilla resulta muy compleja por que tiene muchos valores subjetivos, entonces revise muchas empresas y junte muchas cotizaciones permitiendo crear un tarifario de costos para aquellos que están recién entrando en este mercado, también para que no malogren la plaza con precios por los suelos, también quiero indicar que he excluido de este tarifario precios tipo Wilson porque esos precios no son de diseñador sino de persona dedicada al desmembramiento gráfico de una diseño. bueno aquí se los dejo, espero pronto otorgarles las segunda parte de este tarifario.

Diseño de Identidad Corporativa 1
Logotipo, 2 tarjetas de presentación, sobres, papel con membrete
4 conceptos iniciales y hasta 4 rondas de revisión.
Manual de identidad corporativa
Costo total: S/. 590.00

Diseño de Identidad Corporativa 2
Logotipo, 2 tarjetas de presentación, sobres, papel con membrete
6 conceptos iniciales y rondas de revisiones ilimitadas
Manual de identidad corporativa
Costo total: S/. 700.00

Diseño de Identidad Corporativa 3
Logotipo, 5 tarjetas de visita, sobres, papel con membrete, plantillas HTML de correo electrónico, carpetas de presentación, Plantilla de PowerPoint, firma mail, Plantilla documento Word.
Manual de identidad corporativa
8 conceptos iniciales y rondas de revisiones ilimitadas
Costo total: S/. 1.100.00

Diseño de Logotipo 1
4 conceptos iniciales en 48 horas y hasta 4 rondas de revisión
Costo total: S/. 300.00

Diseño de Logotipo 2
6 conceptos iniciales en 48 horas y rondas de revisiones ilimitadas
Costo total: S/.  400.00

Diseño de Logotipo 3
10 conceptos iniciales en 48 horas y rondas de revisiones ilimitadas
Costo total: S/.  500.00

Diseño de Tarjetas de presentación 1
Cara Individual Business Diseño de Tarjetas
Costo total: S/.  120.00

Diseño de Tarjetas de presentación 2
Cara Doble Business Diseño de Tarjetas
Costo total: S/.  160.00


Pequeña Bifold Folleto – 4 fases de revisiones
el tamaño LTR, 8.5 “x 11” (21cm x 27,5cm) cuando está abierto
Resultados, cuando se pliega, en 4 paneles (2 x 2 paneles de los lados) de 5.5 “x 8.5” o 4.25 “x 11”
Costo total: S/.   400.00

Pequeña Bifold Folleto – revisión fases ilimitada
el tamaño LTR, 8.5 “x 11” (21cm x 27,5cm) cuando está abierto
Resultados, cuando se pliega, en 4 paneles (2 x 2 paneles de los lados)
Costo total: S/.  500.00

Norma Bifold Folleto – 4 fases de revisiones
Doble LTR tamaño, 17 “x 11” (42,5cm x 27,5cm) cuando está abierto
Resultados, cuando se pliega, en 4 paneles de tamaño LTR
Costo total: S/.  550.00

Norma Bifold Folleto – revisión fases ilimitada
Doble LTR tamaño, 17 “x 11” (42,5cm x 27,5cm) cuando está abierto
Resultados, cuando se pliega, en 4 paneles de tamaño LTR
Costo total: S/.  650.00

8-Page Bifold folleto, el folleto o catálogo – 4 fases de revisiones
Doble LTR tamaño, 17 “x 11” (42,5cm x 27,5cm) cuando está abierto
Resultados, cuando se pliega, en 8 paneles de tamaño LTR
Costo total: S/.  850.00

8-Page Bifold folleto, el folleto o catálogo – revisión fases ilimitada
Doble LTR tamaño, 17 “x 11” (42,5cm x 27,5cm) cuando está abierto
Resultados, cuando se pliega, en 8 paneles de tamaño LTR
Costo total: S/.  950.00

12 Page Bifold folleto, el folleto o catálogo – 4 fases de revisiones
Doble LTR tamaño, 17 “x 11” (42,5cm x 27,5cm) cuando está abierto
Resultados, cuando se pliega, en 12 paneles de tamaño LTR
Costo total: S/.  1000.00

12 Page Bifold folleto, el folleto o catálogo – revisión de las fases ilimitada
Doble LTR tamaño, 17 “x 11” (42,5cm x 27,5cm) cuando está abierto
Resultados, cuando se pliega, en 12 paneles de tamaño LTR
Costo total: S/.  1,200.00

PRECIOS ACTUALIZADOS

Estos precios corresponden a un estudio de diseño de Colombia, estan en dolares pero ayudaran a darse una idea de lo que otros paises cobran el mismo trabajo que realizas.

Logo
  • 3 opciones de diseño (Puede escoger sólo una)
  • El paquete incluye derechos de uso
$400.000
Paquete de Imagen Corporativa
  • Logo prediseñado o vectorización a partir de bocetos del cliente
    Hoja, Sobre y hasta 3 tarjetas.
$180.000
Tarjeta de Presentación
  • 2 opciones de diseño (Tamaño 5.5 x 9 cms.)
  • Arte en CD y prueba de color
$60.000
Sobre
  • 2 opciones de diseño (Tamaño 23.5 x 10.5 cms.)
  • Arte en CD y prueba de color
$60.000
Hoja Carta
  • 2 opciones de diseño (Tamaño 21.5 x 28 cms.)
  • Arte en CD y prueba de color
$60.000
Postal, Tarjeta para eventos
  • 2 opciones de diseño – Frontal y Posterior (Tamaños 15 x 10 y 22 x 15 cms.)
  • Arte en CD y prueba de color
$120.000

Periódico

  • 1 opción de diseño
  • Arte en CD y prueba de color
Diseño Conceptual $600.000 +
Diagramación por página $35.000
Volante (Flyer), Ayudaventas
  • 2 opciones de diseño
  • Arte en CD y prueba de color
$160.000 x cara
Habladores, Rompetráficos, Banderines
  • 2 opciones de diseño
  • Arte en CD y prueba de color
$160.000

Plegable

  • 1 opción de diseño
  • Arte en CD y prueba de color por página
$40.000 x cara

Informe y Balance Anual, Revista y Cartilla

  • 1 opción de diseño (Tamaño 21.5 x 28 cms.)
  • Arte en CD y prueba de color
Diseño Conceptual $600.000
Diagramación por página $35.000

Afiche

  • 2 opciones de diseño
  • Arte en CD y prueba de color
50 x 35 cms. $150.000
50 x 70 cms. $195.000
70 x 100 cms. $300.000

Carpeta
  • 1 opción de diseño – 1 cara (Tamaño 22 x 29 cms.) con bolsillo
  • Arte en CD y prueba de color
$100.000

Brochure

  • 1 opción de diseño (Hasta 6 caras)
  • Arte en CD y prueba de color
$350.000
Etiqueta
  • 2 opciones de diseño
  • Arte en CD y prueba de color
$120.000
Personaje
  • 3 opciones de diseño (Puede escoger sólo una)
  • El paquete incluye derechos de uso
$300.000
Empaque
  • 2 opciones de diseño
  • Arte en CD y prueba de color
$800.000 +
Publicidad Exterior
  • 2 opciones de diseño (Vallas, Decoración de vehículos)
  • Arte en CD y prueba de color
$200.000 +
Presentaciones
  • Flash
  • Pdf
  • Ppt
$60.000 x cuadro
$40.000 x cuadro
$20.000 x cuadro
Fotografía
  • Producto
$150.000 +
  • Modelo
$250.000 +
  • Banco de Imágenes
$50.000 +
Retoque digital
$35.000 x hora
Vectorización de logotipo
$25.000
Conversión
  • Imágenes a 72 dpi para envío web
  • Conversión a pdf
$2.000 x imagen