Personalizar portada de dibujando

Prologo
El fin de este tutorial es hacer mas presentable las portadas de los usuarios que buscan su estanacia en dibujando como una manera más de presentar su portafolio, aplicaremos u poco de diseño web, ya que dibujando nos permite hasta cierto punto editar con una determinada libertad  nuestra portada.

Podrán crear una barra de navegación la cual presentará sus vínculos a sus trabajos/portafolios/redes sociales con una imagen botón en vez de un link de texto. 
-->En este mismo como hacer que se abran sus links en tabs o en ventanas nuevas
El uso de spacers para alinear imágenes.
Sonidos de fondo.

Barra de Nav

Lo primero que debemos hacer es diseñar nuestra barra para esto primero debemos dar logistica a lo que deseamos mostrar a quien nos mira, por dar un ejemplo contemplare los siguiente
+Bloger
+Twitter
+Facebook
+DevianArt
+Galería en dibujando
+Link de contacto

En Photoshop tendría mi diseño de esta manera;

También pueden hacer un diseño menos estrecho y minimalista como esto;

el chiste de esto es que tendrán que romper el nav, es decir recortarlo;

cuando lo recorten utilizen el asistente de imágenes para añadirlas sobre el mismo renglón, y verán que "parece" que están unidas esto nos sirve para lo siguiente; 
1.- dar click a la imagen (para seleccionarla)
2.- En el botón link podrán añadir su enlace


1.- En esta pestaña añadimos nuestro link
2.- en destino nos saldrá una caja de opciones, las que nos interesan son;
a) Nueva ventana (su función indicada por su nombre)
b) Misma ventana (se abrirá la pagina en la misma pestaña)

una vez puestos todos los links, llegando a contacto vamos a tipo de vinculo y lo cambiamos por Email ponemos nuestro conacto y si queremos un titulo del mensaje y quizá hasta un formato una vez hecho esto quedará así;


este es el más simple los más complejos algunos de ellos utilizan "spacers" son archivos de 1x1 transparentes, usados para acomodar lo que no podemos acomodar con espacios, basta con añadir el spacer y estirarlo ancho o alto, esto nos sirve cuando alineamos nuestra pagina, no con centrados, si no con los spacers miren este ejemplo he aquí estas imágenes;





Ahora intentemos alinearslas en 3 parrafos





como vemos es ligeramente des alineado hacemos uso de nuestro spacer osea este http://dibujando.net/files/fs/t/i/2011/362/spacer.png




Solo modificamos anchura para eso click en el candado para que no conserve medidas relativas, y solo queda calcular a ojo de águila 






y tha-da tenemos nav complejo gracias a nuestro spacer.

Para nuestra musica de fondo solo es añadir un video de youtube de medidas 1x1 con auto play 


edit; la barra compleja se ve cortada por el espacio entre parrafos eso es configuración de la pagina pero igual les sirve en html cuando no usan etiquetas centradas o alineación

9 Comentarios

Imagen de Zarzosa
Y como hago para subir una imagen que esta en mi pc?
Imagen de Wilty
Pàra subir imagenes para tu portada visita http://tinypic.com/ dale "seleccionar archivo" selecciona la imagen a subir le das aceptar y le das upload now, luego te dara un "directlink" copialo, luego en tu perfil al editarlo en las herramientas de formato hay un icono que al señalarlo dice "imagen" dale click ahí y pega el enlace puedes modificar ahí su tamaño, posición y texto alt (el que aparece cuando señalas una imagen), y listo 
Imagen de Zarzosa
Muchas gracias brother =)
Imagen de Buho01
!Ya lo hice¡ ¡¡Y queda genial!! 
Imagen de mikase95sama
eto....casi no entendi -_-
Imagen de Buho01
Muy bueno, muchas gracias, ya lo voy a usar para mi portada
Imagen de Atzukhy
Gracias por el aporte ^^

Buho avisas para ver como t quedo
y tambien si me ayudas q no entiendi ni un ****
Imagen de Buho01
Justo ahora voy a hacerlo, revisa en unos minutos
Imagen de Atzukhy
Como ordene mi general xD