Photo Credits: Lauren Manning via photopin cc

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.
infografik1

© Adit Gupta

Logos: una mirada al significado de los colores

Sitio web: diarioinfografia.com
Tema: Impacto de colores
infografik2

© Grayson

Consejos rápidos para obtener una marca comercial

Sitio web: diarioinfografia.com
Tema: Protegiendo tu marca
infografik3

© Tim

La historia del iPhone

Sitio web: mashable.com
Tema: Historia del iPhone
infografik4

© mashable.com

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.

drweb-balken1

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.

drweb-balken2

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.

drweb-balken3

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.

drweb-balken4

La evolución del friki

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

© maggie

Sentarse todo el día te está matando

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

© Randy Krum

Salmón: Salvaje vs. Granja

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

© Jazmín

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

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

© Mate

El basurero digital

Sitio web: visualmente
Tema: Residuos electrónicos
infografik9

© carlos

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.

drweb-balken2-1b

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…

drweb-balken2-2

Así que quieres ver el diagrama de flujo de YouTube

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

© karenkavett.com

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
infografik11

© blog.kissmetrics.com

Hermosa-HTML

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

© css-tricks.com

Facebook frente a Twitter Datos demográficos sociales

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

© Randy Krum

¿Qué hace que alguien abandone un sitio web?

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

© blog.kissmetrics.com

Infografía CSS: datos e historia interesantes

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

© Edward Korcheg

La evolución de la web

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

© evolutionofweb.appspot.com

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
infografik17

© Jay Willingham

¿Qué hacen los especialistas en TI?

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

© Eric Lyday

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

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

© Randy Krum

Fundamentos de las pruebas en línea

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

© blog.kissmetrics.com

La anatomía de un diseño web efectivo

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

© Doña Collins

Internet, una década después

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

© Chelsey Kilzer

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?
infografik23

.jpg

© formstack.com

Por el amor de Facebook

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

© Chelsey Kilzer

Idea impresionante para un sitio web

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

© vitaminatalent.com

35 años de productos Apple – Historia visual

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

© Randy Krum

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.

drweb-balken3-1

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.

drweb-balken3-2

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.

drweb-balken3-3

Modelo de usuario de Flickr

Sitio web: flickr.com/photos/bryce
Tema: ¿Quiénes son esos Flickrers?
infografik27

© Bryce Vidrio

Infografía del perfil de los usuarios de Twitter

Sitio web: infografiasshowcase.com
Tema: Usuarios típicos de Twitter
infografik28

© Ciaran Duffy

Espacio del disco

Sitio web: flickr.com/fotos/[email protected]
Tema: Almacenamiento, digo
infografik29

© Diseño de sección

Jerarquía de distracciones digitales

Sitio web: informacioneshermosa.net
Tema: Nuestra pirámide de atención
infografik30

© David McCandless

Los Colores De La Web…

Sitio web: static.colourlovers.com.s3.amazonaws.com
Tema: … son hermosas
infografik31

© colorlovers.com

Anuario de redes sociales

Sitio web: visualmente
Tema: El año de las redes sociales en un libro
infografik32

© maggie

Qué dice tu diseño web sobre ti

Sitio web: seisrevisiones.com
Tema: ¿Tu diseño web habla mal de ti?
infografik33

© Doña Collins

Historia de Internet: 1969-2012

Sitio web: diarioinfografia.com
Tema: De los marcadores del profesor.
infografik34

© Raquel

Infografía del cliente: cómo funciona el marketing de afiliados

Sitio web: coolinfographics.com
Tema: La comercialización del afiliado
infografik35

© Randy Krum

Diseñadores web versus desarrolladores web

Sitio web: seisrevisiones.com
Tema: ¿Cuál es la diferencia entre desarrollador y diseñador?
infografik36

© Shane nieve

Cómo el tiempo de carga afecta su resultado final

Sitio web: blog.kissmetrics.com
Tema: Rebote de sus visitantes con imágenes grandes y tal
infografik37

© kissmetrics.com

Los jugadores obtienen chicas (o chicos)

Sitio web: diarioinfografia.com
Tema: Los juegos y las citas terminan en ing
infografik38

© Eric Lyday

¿Debo trabajar gratis?

Sitio web: deberiatrabajargratis.com
Tema: Si necesitas asesoramiento sobre esto…
infografik39

© Jessica Hisch

Una guía de tipos rápida y completa

Sitio web: diarioinfografia.com
Tema: Propiedades de tipo
infografik40

© Chelsey Kilzer

(dpe)

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

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *