RECURSOS DISEÑO: 20 REGLAS PARA REALIZAR UN BUEN DISEÑO

¿que diferencia un diseño, de un buen diseño? ¿Qué pautas principales son las que tenemos que tener en cuenta para que nuestra idea, sea plasmada con profesionalidad?� Quizás sean algunas de las preguntas que te atormentan cuando comienzas con un lienzo en blanco, desde Recursos web (www.flashmania.es), queremos darte las pautas para conseguir realizar un buen diseño. COMENZAMOS!

1)� � � � � TENER CONCEPTO. No diseñar e ir probando cosas, tienes que tener algo preconcebido, una imagen, una idea...¿qué queremos transmitir?

2)� � � � � COMUNICAR, NO DECORAR. ¿Qué queremos dar a entender? ¿Debilidad? ¿Fortaleza? El diseño tiene que tener carácter, un sentido... y quizás despertar algún sentimiento.

3)� � � � � HABLAR CON UNA VOZ VISUAL. Sé gráfico, transmite gráficamente tu idea.

4)� � � � � USAR COMO MÁXIMO DOS FAMILIAS TIPOGRÁFICAS� aunque no es una regla firme, en temas de diseño, más es menos.

5)� � � � � USAR EL MOVIMIENTO, el golpe, la combinación� � ¡Un-Dos! es esto lo que nos� llama la atención de los diseños.

6)� � � � � NO USAR COLORES SIN QUE TENGAN UN PROPÓSITO, lo de colorear sin salirse de la linea, dejalo para los nenes de guardería. Los colores tienen que tener un motivo!!

7)� � � � � SI PUEDES HACER LO MISMO CON MENOS, HAZLO (Más es Menos)

8)� � � � � EL ESPACIO NEGATIVO ES MÁGICO, ÚSALO, CRÉALO, RESPÉTALO y sobre todo, no lo llenes por llenar. No te pagan por rellenar una hoja en blanco...

9)� � � � � LA TIPOGRÁFIA ES UNA IMAGEN, TRATALA COMO TAL.

10)� � SÉ UNIVERSAL.EL DISEÑO FINAL, NO ES SOLO PARA TI.Piensa en todos los usuarios.

11)� � SUAVIZA Y SEPARA. Sé sutil siempre. Las cosas RECARGADAS, ya no funcionan.

12)� � PRESTA ESPECIAL ATENCION A LUCES Y SOMBRAS.

13)� � MIDE CON TUS OJOS. El diseño es puro asunto visual.

14)� � CREA IMÁGENES. Sé Original.

15)� � IGNORA LAS MODAS. El diseño no tiene nada que ver con modas.

16)� � ACCIÓN, eso es lo que tiene que plasmar tu diseño, movimiento.

17)� � MIRA LA HISTORIA, recréate, visualmente hablando con diseños del pasado, pero no lo repitas.

18)� � LA SIMETRIA ES COMO TODO. Ni tanto, ni tan calvo…

19)� � LA TIPOGRAFIA ES TIPOGRAFIA SOLAMENTE CUANDO ES AMIGABLE. Activa el uso de las fuentes para que tengan carácter.

20)� � ORDEN. Haz las cosas con un ligero orden y respetando aspectos básicos como pueden ser los márgenes, las proporciones, etc.. (Lo que hagas, hazlo por algo, en los buenos diseños, nada está ahí, así porque sí.)

Recurso web Ofrecido por Juan Garcia Delicado
www.flashmania.es sugerencias en: webmaster@4cuarenta.com

No quiero aburrir a nadie con este curso acelerado de php, por ese motivo, pondré todo cuanto sé de este lenguaje de programación a modo de curso rápido, yendo directamente a las cosas que nos interesan. Así ganaremos todos en tiempo.� Y que decir tiene que si tenéis cualquier tipo de duda ya sabeis donde encontrarme (webmaster@4cuarenta.com). El curso lo plantearé con preguntas, así seré más directo aún si se puede.... ¿PREPARADOS?...

RECURSOS WEB: CURSO DE PHP I: INSTALAR LO QUE NECESITAMOS.

Bien como os puse en el post anterior (<<<� � visitame >>>) PHP es un lenguaje de programación del lado del servidor.
vale...Juan, ¿Y esto qué quiere decir?

Pues significa que los comandos que nosotros programemos se ejecutaran en el servidor web y no en el ordenador del usuario como ocurre en otro tipo de lenguajes de programación.

Juan ¿ y eso es bueno o malo?

Bajo mi punto de vista es bueno, ya que nuestro codigo fuente, lo que nosotros desarrollemos, siempre quedará en el servidor y por lo tanto es inviable a fecha de hoy, obtener el codigo que hayamos desarrollado para una aplicación web.

Otra pregunta que tengo....¿php, dónde lo compro?

Php se distribuye gratuitamente esta catalogado como software libre y cualquier persona tiene acceso a él sin problemas. Lo bueno de este tipo de soluciones es que ademas al ser gratuito, hay grandisimas comunidades que dia a dia van sacando cada vez más recursos y scripts, que distribuyen gratuitamente por lo que el soporte a fecha de hoy es IMPRESIONANTE...

Aunque el curso está principalmente orientado a PHP, tambien os quiero comentar que� hablar de php sin hacer mención a mySQL (lenguaje de programacion de bases de datos open-source tambien) es imposible, ya que uno y otro están tan relacionados entre sí, que sin uno, el otro pierde encanto, y viceversa.

Juan ¿Qué me permite hacer PHP?

Buena cuestión la verdad, php, se creo para el desarrollo de aplicaciones dinámicas, es decir, aplicaciones dnd el contenido puede ser modificado, creado o borrado de manera asidua. ¿que tipos de proyectos podemos abarcar con php?� gestor de contenidos, comercio electronico, central de reservas, control de empleados, gestion de usuarios, gestores de correo via web, y un sin fin de aplicaciones más...

AL LIO......¿CUAL ES EL PRIMER PASO QUE TENGO QUE DAR?

Así me gusta que pases a la acción ..... Lo primero irte a la página de apache y descargarte la aplicación donde podrás desarrollar en tu máquina las aplicacioens web que desees hacer...¿En local? si, en local, hemos dicho antes que el lenguaje se ejecuta en un

servidor web, asi que con esta aplicación, lo que haremos será simular que tu máquina es un servidor web. La aplicacion se llama Xampp y la hay disponible para todos los sistemas operativos, asi que a descargarla ya.

XAMPP ! link de descarga

UNO: DESCARGAMOS E INSTALAMOS

Una vez descargado lo instalaremos y ese paquete en concreto nos instalará php, mysql y otros recursos más que veremos según avancemos en el curso.

Una vez instalados los que tengais windows se os habrá creado en vuestro disco duro una carpeta que se llama Xampp� y dentro de esta habrá una carpeta llamada htdocs ó www, hacerle un acceso directo y al escritorio, junto con el icono de xampp

Los amigos de Macintosh, exactamente lo mismo, lo que pasa que la carpeta en cuestión se encuentra dentro de APLICACIONES>>XAMPP>>htdocs (lo mismo , crear un alias y al escritorio).

DOS: PONEMOS EN MARCHA

El segundo paso es pinchar la aplicacióin que recien hemos instalado y le daremos al start de todos los servicios, estas ultimas versiones del xampp, nos permiten activar o desactivar los servicios según queramos... yo siempre lo activo todo, minimizo y me olvido...

Después de esto, iremos al explorador y pondremos la siguiente url http://localhost/xampp/ para comprobar que somos unos artistas instalando xampp.

CONCLUSIONES

1) Ya tenemos un servidor web funcionando en local, tenemos que activarlo cada vez que vayamos a realizar cosas en php, este paso no se repetirá más a lo largo del curso.

2) Accederemos al servidor web-local a traves de los navegadores y poniendo la url siguiente:

http://localhost/el_script_que_estemos_desarrollando.php

3) Que decir tiene, que todos los archivos que desarrollemos tienen que estar guardados en la carpeta htdocs que tanto los peceros, como los maqueros ya tenemos en el escritorio.

4) Ya estas preparado para comenzar con php, al menos tu máquina...

Recurso Ofrecido por Juan Garcia Delicado
www.flashmania.es� sugerencias en: webmaster@4cuarenta.com

FOLLOW y NO FOLLOW EN WORDPRESS. ¿PORQUE OCURRE ESTO?

Bien google para luchar contra el span en las paginas web creo un codigo que más tarde acabarian por adoptarlos otros buscadores. El famoso "rel=nofollow", en los links, lo que hace al rasterarlo un robot de google no es más que leer el enlace, pero no lo sigue.

Yahoo por su parte, según me he ido informando estos días, si lo rastrea, sigue ese link, pero la informacion que recupera de ese nuevo sitio le dá validez cero.

Desde www.flashmania.es recomendamos deshabilitar el "nofollow" de nuestros wordpress, porque gracias a ellos las personas que pongan comentarios en nuestro blog y linkeen alguna de sus paginas web, acabarán por indexar sus paginas web en google. Creo que en la época en la que estamos, la época de internet social, internet emocional, deberiamos de ofrecer nuestra web como un sitio , donde promocionarse indirectamente� a todo el que quiera. ¿Yo que consigo? indudablemente más visitas que mas tarde o más temprano se convertiran en contacto en colaboraciones o dios dirá qué.

Tambien es cierto que todos los proyectos y trabajos que a nivel personal me han salido han sido siempre por ofrecer mis conocimientos altruistamente a quien lo ha necesitado. ahí queda un momento de reflexión para la comunidad.Continuamos!

VALE TODO COMPRENDIDO, PERO ¿CÓMO DESHABILITO� "rel=nofollow" EN MI WORDPRESS?

dofollow

La solución la encontramos en http://kimmo.suominen.com/sw/dofollow/ en esa web podeis bajar un archivo php y que una vez descargado solo teneis que subirlo via ftp a la siguiente carpeta

www.tudominio.com/wp-content/plugings

una vez hecho esto iremos a nuestro panel de administracion y en plugins activaremos dofollow

En opciones>>plugings, pincharemos "DOFOLLOW"y gestionaremos como deseemos, es muy sencillo os dejo un pantallazo. para que veais como he configurado yo, la de este, mi blog.

configurar dofollow

en mi caso puse que todos los comentarios que tuvieran mas de 100 dias publicados se le cambiara el nofollow. Esta todo super-super intuitivo, si no enteis algo ya sabeis!

A PARTIR DE AHORA DIRÉ QUE MI BLOG ES UN "FOLLOW ME BLOG".

Recurso Ofrecido por Juan Garcia Delicado
www.flashmania.es sugerencias en: webmaster@4cuarenta.com

Machodominante.es es un blog dedicado al mundo de la comunicación visual, un blog donde podreis encontrar sitios de inspiración, recursos para diseñadores, portfolios, ezines... siempre relacionado con el mundo del diseño.
Se trata del blog personal de K. Sicardo(www.ksicardo.com), creador visual sevillano que de esta manera trata de aportar su granito de arena a la comunidad de diseñadores, intentando crear un sitio de referencia para todos.

Recurso Ofrecido por Juan Garcia Delicado
www.flashmania.es� sugerencias en: webmaster@4cuarenta.com

http://mxmgallery.maxwellrender.com/

http://www.c4dtextures.com/modules/rmdp/

http://www.mtextur.com/

http://amazingtextures.com/textures/index.php

son los más interesantes con los que yo trabajo, igual hay más paginas web, no lo niego pero estas son las que me han sacado de apuros.

Espero sea de vuestro agrado.

recursos web ofrecido por www.flashmania.es
Juan García Delicado Agosto 2008
webmaster@4cuarenta.com

Con este tercer tutorial veremos finalizado a groso modo el modo de automatizar photoshop, aunque bien es cierto que es un tema tan amplio que perfectamente podríamos realizar 10-15 tutoriales al respecto y sin problemas..

Bien como repaso a los anteriores, vimos sin entrar en muchos detalles, como photoshop podía automatizar tareas , para ello, vimos, su funcionamiento (ver tutorial 1) y como grabar las acciones (ver tutorial 2) para después ejecutarlas sobre un lote de imágenes.

En este veremos como aplicar esas "acciones" que hemos grabado, yendo a FILE>> AUTOMATE>> BATCH (inglés) ó en español ARCHIVO>> AUTOMATIZAR>> LOTES...
y a continuación encontraremos la siguiente pantalla de configuración.

¿Qué tenemos que configurar?
1) SET/TIPO....Ahi le diremos que de donde cojeremos los comandos para automatizar tareas, por defecto..ACTIONS/ ACCIONES
2) ACTION/ACCIÓN...nombre de la acción que hemos grabado con anterioridad
3) INICIO/SOURCE folder/carpeta, le dirimos de donde tiene que iniciar las acciónes por defecto, photoshop, las coje de una carpeta y las que elabora con nuestras acciones las cpia en otra carpeta destino, por lo tanto en este apartado pondremos la ruta de la carpeta de origen.
+ Tendremos además para marcar, otras casillas como son, obviar, el comando Abrir imagenes, (podriamos ejecutar una ación sobre un archivo que ya tengamos abierto.
+ Incluir en la seleccion las sub--carpetas del directorio que hemos marcado con anterioridad
+ Suprimir la información de los dialogos d apertura de archivos
+ Suprimir las advertenciasm de pos perfiles de color
estas dos últimas evitan que nos muestren pantallas de advertencia, mientras se ejecutan las acciones, recomiendo marcarlas, sino imagniros 4 ventanas de advertencia por 200 fotos... se pierde más timepo en cancelarlas que en otra cosa..

y en la siguiente parte marcaremos la carpeta destino, asi como el nombre y la extension de los archivos, podremos decirle sin problemas que la guarde renombrado con serie de numeros, palabras, etc..etc.

y por último ok, photoshop se pondrá a realizar esas fundiones en ese lote..

RECURSO OFRECIDO POR www.flashmania.es,
Elaborado por Juan Garcia - webmaster@4cuarenta.com Julio 2008

http://www.dafont.com

¿COMO SE HACE?

1) Abriremos el archivo al que vamos a "grabar" las acciones que le hagamos.

2) iremos a WINDOWS>>ACTIONS (inglés) // VENTANA>>ACCIONES.. y se nos abrirá el panel que he marcado en la captura de pantalla con amarillo y rojo.

Aquí os dejo la captura de solo el panel acciones.

3) En la parte inferior encontramos varios botones. Imaginaros que estáis, delante de una grabadora y como tal, encontrareís.. el stop, el rec, el play y otros botones de gestión de acciones como son, crear carpetas, acción nueva, y la típica de toda la vida, papelera, para eliminar acciones.

4) Para comenzar a poner a photoshop a grabar todos nuestros actos, nos valdrá con pinchar, accion nueva (es el mismo icono de capa nueva), asignarle a esa acción un nombre, y darle a rec.

5) Photoshop grabará absolutamente y con todo detalle, todo lo que hagamos, incluido del abrir, cerrar, copiar, cerrar el programa, etc... Asi que si vais a tratar una imagen desde cero, abrir photoshop , dadle a grabar y empezais... (pongo un ejemplo)

a)archivo>> abrir.... la imagen que me interesa

b) panel de capas y hacer una copia para mantener la original intacta

c) desactivar la capa original, para trabajar para la copia

d)IMAGEN>> MODO y la cambiamos de RGB (por defecto vienen así de las camaras digitales) a CMYK para poder imprimirla sin problemas

e) IMAGEN>>LEVELS //imagen >>niveles.. para ajustar los niveles de intensidad de la foto en cuestión.

f) CAPA NUEVA.. que rellenamos con el patron de efecto tv, que podrás encontrar aquí.

g) Ajustamos la trasparencia de esa capa, y para terminar...

h) archivo guadar como.... XXXXX, en jpg al máximo de calidad.

y al acabar, pincharemos STOP.

PHotoshop ha grabado todos esos pasos, con los parámetros que hayamos introducido.

en el próximo tutorial explicaré como decirle que realice todas esas acciones a un lote de imagenes.

Quiero que el concepto, quede bien claro, lo aplicamos a una imagen, y eso mismo lo aplicará a las imagenes o archivos que le pidamos.

Próximamente la última parte de este tutorial tan interesante.

RECURSO OFRECIDO POR www.flashmania.es,
Elaborado por Juan Garcia - webmaster@4cuarenta.com Julio 2008

1) FUNCIONAMIENTO DE AUTOMATIZACIÓN DE TAREAS.

2) GRABAR LA AUTOMATIZACIÓN DE TAREAS.

3) APLICAR LA AUTOMATIZACIÓN A UN LOTE.
Bien para comenzar, quería comentar que photoshop es conocido como uno de los programas de edición fotografica, más potentes y extendidos que existen, hay miles de opciones de configuración que conociendolas un poquito, podemos hacer cosas asombrosas, próximamente, iré introduciendo en la web, algunas cosas para hacer con photoshop muy muy interesantes.( efecto maqueta, imagenes en blanco y negro perfectas, como recortar objetos dificiles (pelo, sombras...), mejorar el color de ojos, potenciar aspectos de la imagen que por sí solos, no destacan, ajustes de colores, de tonalidades y un larguísimo etc, que estoy preparando....).

¿COMO PROCESA PHOTOSHOP?

En síntesis, el proceso de automatizar photoshop, no es más que abrir, el programa, y darle a un boton, que registrará absolutamente todos los pasos que queramos hacer con dicha imagen. Cuando terminemos, pararemos el "registro de pasos", y le diremos que procese, esas mismas cosas que hemos hecho, con un "lote" de imagenes contenidas en una carpeta.

algunos pensareís bueno.... ¿Y tan potente es esta herramienta?� y tengo que responder un SI, rotundo. Imaginemos que estias de viaje y que teneis 400 fotos, de los 15 días que habeis estado pasando en la playita o en la montaña y observais que todas las fotos han salido desenfocadas, o muy rojas, podreis editar 1, y solo una, dedicandole todo el tiempo del mundo y cuando decirle a photoshop, ehii, hazme el resto, igual que he hecho yo esta.(399 restantes).

La última vez que la usé fué para hacer una galería, imaginaros 30 fotos para una galeria, cada una de un tamaño distinto, y que tenía que hacer 2 cosas, hacer las miniaturas, desaturandolas (para que se viesen en Blanco y negro) todas al mismo tamaño y además hacer las fotos grantes, todas al mismo tamaño y con un marco con mi firma abajo. edite solo una, para la miniatura y otra para la imagen grnade y el resto photoshop lo hizo. ¿genial verdad?

Eso no es todo, porque aparte del ahorro de tiempo material, que eso conlleva, imaginaros que algún cliente os pide retocar todas las fotos de su empresa para hacer un almanaque, ¿cuanto cobraríais? interesante cuestion, en el fondo solo editaré una, el resto, se hace solo, eso sí aplicando mis conocimientos, que es "lo que vale dinero". Podreís cobrar por cada foto una cuota fija,no sé 5-7-9 euros y las multiplicais por las fotos que le hagaís. Ahora le veís más sentido a esto verdad? tardas 8 minutos, en hacer una, y el resto se haces solo. ...84 euros, 8 minutos de vuestro tiempo, no esta mal eh?

La próxima en unos días.
RECURSO OFRECIDO POR www.flashmania.es,
Elaborado por Juan Garcia Delicado - webmaster@4cuarenta.com Julio 2008

Espero os sea de ayuda.

sangres y cortes

RECURSO OFRECIDO POR www.flashmania.es,
Elaborado por Juan Garcia - webmaster@4cuarenta.com Julio 2008

Me he encontrado mil veces con ese problema y en mi caso que trabajaba en una empresa de diseño gráfico y web, los equipos eran digitales (laser), cada impresora, tenia unos ajustes de color, y mundos totalmente distintos. Las impresiones no se parecian en nada. Hasta que localicé este recurso.
La solución la encontré en este pdf, que os paso, lo que teneis que hacer es imprimirla en la máquina en cuestión y usar esa tabla de colores, como referencia. Si quiero un amarillo, con una tonalidad un tanto anaranjada, no pongo la que se vea bien en mi monitor, sino la que vea en esa guia-pdf-impresa, que� satisfaga mis necesidades. Cada color tiene desglosado su tipo PANTONE y su configuracion CMYK.

El calibrado del monitor, no soluciona al 100% el problema.
Espero os sirva, por aquí lo teneis

COLORES & TABLA (2 pdf´s)

RECURSO OFRECIDO POR www.flashmania.es,
Elaborado por Juan Garcia - webmaster@4cuarenta.com Julio 2008

La página en cuestion es la siguiente:

Juan Garcia Delicado

así que ya sabeis, si teneis dudas o consultas, también las podeís realizar desde ahí.