¿Crear Tu Diseño Ice Blue?
Autor: ElBacan-Recargado
En Iceblue vamos a conocer la forma de crear un diseño.
Bienvenidos amigos y amigas, les invito simplemente, a divertirse creando
En esta parte comenzaremos a describir algunas de las herramientas muy útiles
para nuestro diseño. Para empezar, acá tienen un muy buen sitio para sacar
imágenes, ya sea para la creación de fondos para botones, cabezal, etc. o
simplemente el fondo de nuestra web. No olviden lo importante que es el
seleccionar bien el tamaño de la imagen que vamos a usar, esto para no crear
conflictos posteriores.
Acá está el link del sitio web
Hay varios buenos programas para crear botones y cabezales, uno muy simple
es el
por ejemplo. 
Ven que no es complicado
, en el siguiente paso les explico cada una de las imágenes que incluiremos en nuestro nuevo diseño, recuerden que lo
importante es respetar las medidas de esas imágenes, esto para no deformar
el diseño
Ahora comenzaremos a revisar cada imagen que debe llevar el diseño, asumo
que ya descargaron estas imágenes y las tienen en vuestros PC para
apreciarlas en tamaño real.
Es muy importante, recuerden, respetar los tamaños de cada imagen que
crearán, he antecedido un número a cada una de estas imágenes, esto dado
que en los códigos css van en ese mismo orden.
Revisamos ahora las primeras cinco imágenes con sus respectivas medidas y
funciones dentro del diseño, para verlas en tamaño real basta con que hagan
un click sobre ellas
Nota: Te recomiendo ir guardando las imágenes en tu ordenador para utilizarlas
con posterioridad y tenerlas a mano ante posibles dudas, sobretodo en las
medidas que estas deben llevar, cada imagen está alojada en PWG
Descripción de Imágenes
01 Fondo Web (1024 X 768)
Esta imagen corresponde al fondo utilizado en nuestro diseño, al menos en
estos códigos css te recomiendo que sean de ese tamaño (1024 x 768) para
que salga una sola imagen de fondo y no en mosaico. Muy importante es
seleccionar un fondo que no tape la autopublicidad de PWG, el ocultarla es
causal de baja inmediata sin previo aviso.
02 Cabezal (984 X 250)
Esta imagen corresponde al cabezal. Recuerda usar solo formatos permitidos
por PWG para crear uno, respetando las medidas obviamente, esto dado que las
imágenes las puedes subir, por razones de velocidad y seguridad a PWG, los
servidores externos podrían fallar y sería muy perjudicial para el diseño. El
formato que yo uso para el cabezal es el .png, en este ejemplo es con formato
.gif
03 Botón 1 (183 X 33)
Esta imagen corresponde a la de los botones que se aprecian en el menu
cuando ingresamos a ver el diseño de nuestra web, en lo posible que no sean
muy animados, más bien estáticos, dependiendo de lo que quieras mostrar en
tu trabajo del sitio web.
04 Botón 2 (183 X 33)
Esta imagen representa también a los botones del menu, la diferencia es que
están ocultos y solo aparecen cuando pasas el ratón por encima de ellos y
reemplazan al botón 1, aquí entonces podrías crear un botón distinto al primero
para darle un gran efecto y lucirte ante tus visitantes, no olvidando tener
cuidado de no tapar el color de texto que seleccionaste para mostrar el Menu,
por ejemplo si el botón es negro, los textos no pueden ser del mismo color.
05 Fondo Box (228 X 1000)
Como se aprecia en la imagen, esta corresponde al fondo que le daremos a
nuestras cajas (box), siempre debes elegir un color adecuado al diseño que
estás creando, este no es el tamaño real de la imagen, por cierto no olvides
respetar las medidas.
Ahora vamos a revisar las imágenes de la seis a la ocho.
06 Button1 ( 566 X 38 )
Esta imagen es muy importante como todas, la gran diferencia es que esta va en
el centro del cuerpo de nuestra web, recomiendo que sea muy original, podrías
escribirle un texto y hacerle algún tipo de animación, preocúpate siempre de
que resalte ante las demás imágenes, si bien en gustos no hay nada escrito, es
bueno ser originales.
07 Button2 ( 566 X 38 )
Como pueden apreciar, esta imagen es muy parecida a la anterior, en cuanto a
su tamaño y texto, esto es modificable a gusto, la diferencia entre estas
imágenes, es que en este caso aparece al final del centro en el cuerpo de la web,
las opciones de animación quedan a criterio propio.
08 Fondo páginas (600 X 600)
Esta imagen es la que aparecerá como fondo en cada una de nuestras páginas,
es importante que sea acorde al color de los textos para poder hacerlos visibles,
te recomiendo usar imágenes sólidas en cuanto al color, sin tantos dibujos,
algo así como el que aparece en el ejemplo, recuerda que la medida es de
(600 X 600)
Barra Contador de Visitas ( 566 X 38 )
Esta imagen corresponde a la que aparece en la barra inferior de nuestra web,
específicamente en donde aparece el contador de visitas como lo muestra la
siguiente imagen, recuerden que las medidas son de ( 566 X 38 ) pixeles
Ahora revisaremos las dos últimas imágenes incluídas en los códigos css que
conformarán nuestro diseño.
09 Separabox (228 X25)
Esta imagen aparecerá en la parte inferior de cada box, en el ejemplo he
rellenado cada uno de ellos para que puedan apreciar su función en el
diseño.
10 Sobrebox (227 X 25)
Como el nombre lo dice, esta imagen aparecerá sobre cada box y a través de
los códigos css también la incluiremos para que aparezca por sobre el menu,
en el ejemplo te puedes dar cuenta de ello.
He dejado para el final estas dos imágenes que te ayudarán a personalizar más
el diseño y hacerlo más ancho en el caso de los box.
11 Anchar box (218 X 5)
Lo ideal es que cuentes con una imagen como esta a la hora de anchar cada
box, así aprovecharás más el espacio y tu web se verá más completa, el código
como este iría pegado tal cual en cada box
box, así aprovecharás más el espacio y tu web se verá más completa, el código
como este iría pegado tal cual en cada box
| Código: |
| <img src="https://img.webme.com/pic/e/elbacan-recargado/11_ancharbox_218_25.gif"/> |
12 Divisor (160 X 33)
Esta imagen corresponde a los divisores o separadores de los temas en el
menú, para agregar estas imágenes debes crear una nueva página, abrir las
opciones y elegir la que dice "Puntos de menú sin link", como título colocas
un código como este
menú, para agregar estas imágenes debes crear una nueva página, abrir las
opciones y elegir la que dice "Puntos de menú sin link", como título colocas
un código como este
Código: |
| <img src="https://img.webme.com/pic/e/elbacan-recargado/12_infos_160_33.gif"/> |
Box de contenido 1