20 de Abril de 2014
Abr
28

Tutorial: Cómo alinear las imágenes para que queden paralelas al texto

Categorías: ,

 Pareciera que fue ayer cuando, tímidamente, abrí este blog (que es casi como el Inframundo), sin saber literalmente nada. Ni siquiera el fondo que ven detrás de éstas líneas fue hecho por mí. Y sin embargo, aquí estoy yo, escribiendo un tutorial para todos ustedes...

 Y el tutorial será, ni más ni menos, que aprender a alinear un texto y una imagen paralelamente, tal como hice en mi ficha de fatal frame, o como hace Baalard con sus índices.

 Lo primero y más importante a tener en cuenta si deseamos alinear un imagen y un texto, es tener los siguientes elementos:

-Un blog (Jamás se me habría ocurrido)

-Una imagen (¿De veras?)

-Un texto (No jodas!!!)

 

Dream Avatar Devil, no me estás ayudando...

 

 Como ejemplo, utilizaré una porción de mi ficha de Fatal Frame 2, la correspondiente a la Mujer del Cuello Roto me pareció la más adecuada.

 En cualquier caso, como primer paso fundamental, escribiremos el texto correspondiente. Recomiendo utilizar textos de un tamaño medio-largo, ya que de otra forma, no tendría mucho sentido alinearlo a las imágenes.

 Luego, tendremos que insertar la imagen en la entrada, para ello, vale con utilizar un simple copiar y pegar, pero como algunos navegadores no permiten eso, tendremos que copiar el código de la imagen, algo fácil si la buscamos vía google, pero suponiendo que la encontremos en otra entrada de gamefilia, sólo podremos visualizar el código de la imagen haciendo click derecho, propiedades, y copiando donde dice "Dirección" o "URL"

 

tuto2.jpg picture by fabizio

 

 Yo, particularmente, recomiendo utilizar imágenes angostas y largas, porque si son demasiado anchas tapan el texto (y más sabiendo el poco espacio de texto que tienen las entradas de blog), por lo que lo mejor es utilizar imágenes que no sobrepasen los 150 píxeles de ancho.

 Una vez que ya hayamos seleccionado la imagen, la colocaremos en un lugar al azar dentro del mismo texto, pero aquí es donde vienen los problemas, ya que si lo hacemos de ésta forma, al colocar la imagen nos quedará algo como ésto:

tuto3.jpg picture by fabizio

 

 No te preocupes si te queda así a la primera, porque es normal que ocurra eso, es más, si no ocurriese de esa forma, éste tutorial no tendría razón de ser.

 Ahora, aquí viene el secreto: al igual que el texto, a las imágenes tambien se las puede alinear a la izquierda o a la derecha. Por lo cual, para alinear ambas cosas, sólo es necesario mantener seleccionada la imagen (sabrás que es así porque tendrá unos puntos blancos a su alrededor), y luego alinearlos a la izquierda o a la derecha con sus correspondientes botones. Cuando vayas a hacerlo, ten muy en cuenta que las alineaciones centradas y justificadas NO SIRVEN para esto, y dejarán a la imagen sin alinear.

 

tuto4.jpg picture by fabizio

 

 Si lo has hecho correctamente, te tendría que quedar algo como lo de arriba. Ahora que ya superaste la parte "difícil", tan sólo queda acomodar la imagen, por lo cual debes hacer click y arrastrarla hasta el punto del texto donde quieres que aparezca el tope de la imagen, y, ayudándote con la vista previa, alinearla hasta que te complazca el resultado.

 Por lo cual, si has prestado atención, el resultado debería ser éste:

 

tuto1.jpg picture by fabizio

 

 Hasta otra!!!!

5
Valoración media: 5 (5 votos)

9 Comentarios:

Buen tuto

Esto me lo sabía yo (Aunque nunca lo he necesitado) pero puede ser útil a mucha gente

¡Buen post! ^^

No soy de poner imagenes alineadas

Ni siquiera en el Word, pero ahora al menos, ya sé como se hace. No te acostarás sin saber algo más Wink.

Genial explicación! Y

Genial explicación! Y encima de forma amena y divertida! La verdad es que no sabía hacerlo y aunque sentía curiosidad de como podía implementarse lo cierto es que no he necesitado realizarlo en alguna entrada (de momento). Espero que este post se ponga en la sección de ayuda para la creación de blogs, que para eso está... un saludo! ;)

Gran entrada

Un tutorial muy útil y ameno para este aspecto gráfico, amigo Fabri. Francamente, no sabía cómo hacerlo; pero ahora intentaré valerme de "este truco" más a menudo; le da muy buena presentación a las entradas. Cinco estrellas, claro.

Saludos,
Desmodius.

 

Ah si, ya lei ayer la

Ah si, ya lei ayer la entrada, lo que pasa es que no comente, me conecte con prisa, y apenas vi las entradas de los compañeros.

Ahora que leo de nuevo el tutorial, me parece una gran explicación, para mi me viene útil, porque utilizo imagenes similares a la del ejemplo xD.

Un saludo, y no pasa nada por haber comentado 2 veces en mi blog!!

Muy buen tutorial fabri,

Muy buen tutorial fabri, estoy segura que ayudará a mucha gente que acaba de empezar en estas cosillas ^^

5 estrellas y una mini portada con retraso, pero participando en la portada semanal ^^

 

 

MEDALLA

Bien, aqui te dejo tu merecida medalla por participar en el concurso Da Vinci. Un saludo!

 


 

Órale

Voy a poner en práctica eso. Aunque como sabes, yo casi nunca pongo imagenes en mis artículos a menos que sea absolutamente necesario. Pero en caso de hacerlo, seguiré estos consejos. Gracias por la información.

Breve y directo. Gracias por el aporte :)

Lo añado a la sección de información básica de la página de ayuda. ;-)