> 40 infografías entretenidas más algunos consejos para crear las tuyas usando Photoshop

Las infografías son populares. Ayudan a reducir coherencias complejas a ilustraciones simplificadas. La información se visualiza. Las mejores infografías se explican por sí mismas y casi no necesitan texto. Una imagen vale más que mil palabras, dicen. Y es verdad. En esta colección, compartimos contigo 40 entretenidas infografías sobre temas populares de toda la red. Si eres programador, ilustrador, diseñador o nerd de cualquier otro tipo, lo más probable es que encuentres interesantes al menos la mayoría de estas piezas informativas. Si no te gusta el contenido, probablemente te inspirará la forma en que se ha hecho el gráfico.

Créditos fotográficos: lauren manning vía alfiler fotográfico CC

Si está interesado en crear su propia infografía, tenemos algo para usted: busque nuestros minitutoriales sobre retocar su información con Photoshop en el siguiente artículo.

Diseñando la infografía del «mundo de la programación»

Sitio web: smashingmagazine.com
Tema: Historia de los lenguajes de programación.

Logos: una mirada al significado de los colores

Sitio web: diarioinfografia.com
Tema: Impacto de colores

Consejos rápidos para obtener una marca comercial

Sitio web: diarioinfografia.com
Tema: Protegiendo tu marca

La historia del iPhone

Sitio web: mashable.com
Tema: Historia del iPhone

Dibujar visualizaciones de porcentajes

01 Primera barra

La infografía reciente no impresiona con hechos concretos, al menos no principalmente. Impresionan por su manera de presentar estos hechos. Para ayudarlo a comenzar con sus propias visualizaciones, he creado algunos minitutoriales utilizando mi plataforma favorita, Adobe Photoshop. Con una buena capacidad de abstracción, también debería poder transferir mis consejos a su propia aplicación de gráficos favorita.

Para mostrar porcentajes en forma de algunas barras, podríamos optar por utilizar una luz apariencia 3D . Elegimos el Herramienta rectangular y dibujamos una barra corta en el color de nuestra elección.

02 Segunda barra

Control+J duplica la barra. Con la ayuda del Herramienta de movimiento colocamos la segunda instancia de nuestra barra ligeramente hacia abajo y hacia la derecha. BAmbas barras deben superponerse un poco. Realizando un doble clic sobre la miniatura de la capa en la ventana de capas, abrimos el selector de color para elegir un tono ligeramente más claro del mismo color. Recoge la Herramienta de selección directa, apunte a los bordes derechos y tire de ellos hacia la derecha.

03 Diseñando la Transición

Con otro Control+J duplicamos la barra de nuevo. Esta vez, todavía usando el Herramienta de selección directa colocamos el borde superior derecho de esta barra en el borde superior derecho de nuestra primera barra. El borde inferior derecho se maneja de la misma manera. Ahora oscurecemos la nueva barra para darle un aspecto más oscuro que el que muestran las otras dos barras. Cambie el orden de las capas, de modo que la barra más pequeña y oscura esté entre las dos barras más grandes.

04 Reproducción y Etiquetado

Ahora podemos duplicar fácilmente las tres piezas, colocarlas en otro lugar y colorearlas de manera diferente siempre que necesitemos que se muestren las barras de porcentaje. Si necesita barras más cortas y/o más largas, siempre puede tomar el Herramienta de selección directa y tire de los bordes. Etiquete las barras simplemente poniendo texto en las posiciones apropiadas.

La evolución del friki

Sitio web: visualmente
Tema: Evolución del – bueno – Geek

Sentarse todo el día te está matando

Sitio web: coolinfographics.com
Tema: Ponte de pie para que tu propia silla no te mate

Salmón: Salvaje vs. Granja

Sitio web: diarioinfografia.com
Tema: Beneficios de los ambientes naturales para los animales

SEO en imágenes: nuestra infografía de SEO

Sitio web: datadial.net
Tema: SEO, obviamente…

El basurero digital

Sitio web: visualmente
Tema: Residuos electrónicos

Ilustraciones

01 Ilustraciones

Para mejorar rápidamente una infografía, las ilustraciones hechas por agencias de valores son una opción válida. La mayoría de estos vienen como gráficos vectoriales, lo que garantiza una escalabilidad ilimitada. Imagen que nos gustaría jugar con el tema “Mascotas en los hogares por especie” y, además de otras cosas, necesitaríamos algunas ilustraciones de las mascotas involucradas. Encontré este: Plantillas de logotipos de animales de origami | #89604826 | Sellpix de Shutterstock.com.

Si bien el gráfico no viene con un fondo transparente, hacemos doble clic en la imagen para crear un Capa 0. ahora elegimos Añadir máscara de capa desde la parte inferior de la ventana de capas. Ahora, con la ayuda del Herramienta Lápiz y negro como color de primer plano eliminamos la ilustración más o menos, luego más fina con el Herramienta Lazo poligonal.

02 Añadir ilustraciones

Si ha colocado las ilustraciones en capas separadas, podemos combinarlas fácilmente con las barras de porcentaje creadas anteriormente. Habiendo trabajado con formas, podemos ajustar los colores con la misma facilidad. Hemos mejorado con éxito esta parte de la infografía, pero queremos más…

Así que quieres ver el diagrama de flujo de YouTube

Sitio web: karenkavett.blogspot.de
Tema: ¿Qué se ve en YouTube?

Mobile Mania: la creciente importancia de la optimización de sitios web móviles

Sitio web: blog.kissmetrics.com
Tema: Los clientes móviles necesitan sitios web móviles

Hermosa-HTML

Sitio web: css-tricks.com
Tema: Asombro, mira. Un hermoso código HTML…

Facebook frente a Twitter Datos demográficos sociales

Sitio web: coolinfographics.com
Tema: ¿De quién es más largo?

¿Qué hace que alguien abandone un sitio web?

Sitio web: blog.kissmetrics.com
Tema: Por qué los visitantes te dejan temprano

Infografía CSS: datos e historia interesantes

Sitio web: blog.templatemonster.com
Tema: Hechos de CSS

La evolución de la web

Sitio web: evolucióndeweb.appspot.com
Tema: El titulo lo dice todo

Cómo conseguir un trabajo en las redes sociales en 5 minutos

Sitio web: diarioinfografia.com
Tema: Lo fácil que es conseguir trabajo en las redes sociales

¿Qué hacen los especialistas en TI?

Sitio web: diarioinfografia.com
Tema: ¿Alguna vez se preguntó qué hace realmente la gente de TI?

La guía infográfica para principiantes sobre marketing en línea

Sitio web: coolinfographics.com
Tema: Mercadeo en línea

Fundamentos de las pruebas en línea

Sitio web: blog.kissmetrics.com
Tema: Pruebas en línea

La anatomía de un diseño web efectivo

Sitio web: webdesignledger.com
Tema: Diseño web efectivo

Internet, una década después

Sitio web: diarioinfografia.com
Tema: El futuro está sobre nosotros

La anatomía de una página de destino perfecta

Sitio web: formstack.com
Tema: ¿Existe tal cosa como una página de aterrizaje perfecta?

.jpg

Por el amor de Facebook

Sitio web: diarioinfografia.com
Tema: Cómo cambia Facebook las relaciones

Idea impresionante para un sitio web

Sitio web: vitaminatalent.com
Tema: Exacto,… Impresionante.

35 años de productos Apple – Historia visual

Sitio web: coolinfographics.com
Tema: la historia de manzana

Un ícono para hombre, uno para mujer

01 cabeza y piernas

Defina un color de primer plano y dibuje una forma usando el Herramienta Elipse mientras mantiene presionada la tecla Shift. De esta manera tu elipse se convertirá en un círculo perfecto. Las piernas se crean usando el Herramienta Rectángulo redondeado. En la barra de opciones defina un radio de 20 píxeles.

Para dibujar el ícono femenino puedes copiar las formas del ícono masculino (bíblico, ¿no es así), posicionarlos con el uso de Herramienta de movimiento y luego ajuste los colores haciendo doble clic en el pulgar de la capa. La falda se dibujó con el Herramienta Lápiz, con la forma seleccionada en la barra de opciones.

02 Cuerpos

Crea el cuerpo del icono masculino con el Herramienta rectangular. Dibuja los hombros usando el Herramienta Rectángulo redondeado. Para asegurarse de que solo se muestren por la mitad, elija el Herramienta rectangular y seleccione Restar del área de forma en la barra de opciones. Ahora podemos configurar selectivamente áreas de la forma como transparentes, simplemente dibujando otra forma encima de ellas. Los brazos y las piernas se fabrican utilizando el Herramienta Rectángulo redondeado.

03 Valores porcentuales

Coloque los brazos del icono de mujer usando Editar > Transformar ruta > Rotar. Dibuje las barras para los valores porcentuales usando el Herramienta rectangular e inscribir los valores con el Herramienta de texto. Yo sugeriría blanco para los valores.