DESIGNAID

Herramientas claves para representar tus ideas

Archivo para Diseño Web

Crea fondos a pantalla completa en dreamweaver

La encuesta de este mes ha ido avanzando poco a poco más hacia Photoshop, Diseño web y 3DS MAX. Ya me imaginaba que iria más o menos hacia esos lados pero me asombra un poco que el sr. Flash esté entre los últimos. Si no has enviado tu voto hazlo ahora todavia hay oportunidad para enviarme tus comentarios, yo trataré de compartirles mas posts sobre lo que necesiten. De hecho todavia tengo posts guardados sobre 3DS MAX pero no he tenido tiempo ni oportunidad de publicarlos. (si alguien se ha mudado de casa alguna vez sabrá lo complicado que resulta y el tiempo que requiere, asi que sorry por lo retrasados que estan los posts de 3DS MAX) 😉 asi que paciencia con eso que si vienen.

Y en esta oportunidad va para complacer los que están trabajando con el web o con sus páginas, porque haremos en dreamweaver una de las prácticas más simples y más buscadas: Usar un fondo a pantalla completa para nuestras páginas. Ya hemos trabajado con las imágenes usandolas como fondos para nuestras páginas en una que otra oportunidad aqui en Designaid, -incluso hasta un “efecto ego” como lo nombraron por ahi- pero esta vez será diferente porque usaremos el codigo HTML para controlar nuestras imágenes en Dreamweaver: Usaremos este fondo para colocarlo en toda nuestra página:

Este será el efecto de pantalla completa de mi pagina web.

Este será el efecto de pantalla completa de mi pagina web.

Un fondo con un gradiente de un tono a otro. Lo interesante es que lo haremos de tal manera que parezca una imagen vista a pantalla completa en nuestro navegador de internet y cargará super rápido. Un resultado sencillo pero que resulta muy atractivo como efecto para nuestros fondos….ah y para variar lo que siempre digo: super fácil de hacer.

Listo? veamos como hacerlo…
Lee el resto de esta entrada »

Anuncios

Crea fondos de patrones coordinados con Photoshop.

Photoshop nunca dejará de hacerme sonreir. A pesar que lo uso desde la versión 3.0, cada vez que abro el programa encuentro una razón para seguirlo usando. Muchas de las cosas que puedes hacer con él son bastante sencillas pero la clave es saber como usarlo más rápidamente. Por ejemplo puedes lograr hacer muchos efectos y casi cualquier cosa que quieras. De hecho en un post anterior comenté como puedes usarlo para tus texturas web, pero también puedes crear fondos para otros diseños como tus impresos, artes, fondos de pantalla, etc.

Veamos como podemos generar un fondo como este:

El fondo listo.

Tomé el logo de Designaid y simplemente lo repetí varias veces en el arte.

Este fondo lo puedes usar en cualquier tamaño ya que tu figura principal se multiplicará en toda la pantalla. Es muy simple de hacer, ysólo es cuestión conocer un par de trucos sencillos.

Empecemos…
Lee el resto de esta entrada »

Ya tengo mi sitio web, pero… ahora como lo subo a internet?

Una de las preguntas que recurrentemente me hacen en mis clases es: Cómo hago para subir mi sitio en internet?? (gracias por acordarme del post Ramón y Yuni) si ya montaste tu sitio en Dreamweaver o cualquier otra herramienta, ahora sólo necesitas subirla o “colgarla” en linea en internet.

Para esto, comúmente necesitas 2 cosas:

-Un dominio. (o un nombre de dominio, ej: http://www.mipagina.com)
-Un servicio contratado de hosting o alojamiento web.

Estos 2 servicios los contratas en internet y existen infinidad de compañias que los ofrecen. Los precios varían muchisimo y dependen del servicio que necesites, la velocidad de descarga, el espacio que necesitas costear, el indice de transferencia, entre muchos otros. Incluso y por supuesto el pais tambien influye en los costos. Generalmente las empresas de internet locales en tu mismo pais ofrecen las tarifas más económicas para el hosting e incluso muchas te ofrecen o te regalan el dominio. Asi que siempre es buena idea si estas empezando a buscar servicios de internet preguntar en tu misma zona geográfica. (asegúrate de leer las “letras chiquitas” de las ofertas. muchas de ellas incluyen restricciones o limitaciones bastantes oscuras)

Ahora todo esto que les comento es cuando quieres montar todo el proyecto como es debido, profesionalmente diriamos. pero si estas empezando a trabajar con el web –imagino que si, de lo contrario no estarias leyendo este post 😉 — te recomiendo empezar a documentarte de todo este proceso usando un host gratis. hay millones y millones de hosting gratuitos en la red, para empezar te dejo esta lista de los 5 mejores de host gratuitos que encontre que tal vez te podria servir. Muchos de ellos colocan banners publicitarios en tu página. Ya sabes, ellos tambien necesitan hacer dinero y tu ganas un hosting gratis para tu página. Bien si ya tienes todo esto veamos entonces: como subo mi sitio a internet?… veamos…
Lee el resto de esta entrada »

Explosiones de color con Photoshop

pildora_ps.gifHola a todos. en esta oportunidad les voy a presentar un efecto super rápido de hacer en photoshop que te puede ayudar en tus artes. Este efecto siempre ha sido usado en el area publicitaria para darle más impacto a imagenes/productos/promociones.

explosion_simple.jpg

Es muy sencillo y rápido de hacer. Uno de los concejos que te doy para aprender más sobre photoshop es simplemente jugar con él. encontrarás efectos, métodos de trabajo y resultados muy impresionantes simplemente divirtiendote un rato con esta útil herramienta. abre photoshop y prepárate para hacer una explosión de color.

Empecemos!

Lee el resto de esta entrada »

Dreamweaver: donde están mis imágenes?

pildora_dw.gifHola a todos. hoy voy a tocar un tema que creo que es super reconocido por cualquiera que haya usado alguna vez dreamweaver. (o por igual cualquier software para el montaje de páginas web) y es cuando sucede esto:

donde_estan_imagenes_1.gif
te ha pasado? antes de que sonrias y te lleguen malos recuerdos de cuando estabas a las 4 de la mañana preguntandote que hiciste para merecer este castigo del cielo, sigue leyendo. porque este es uno de los problemas más comunes cuando empezamos a trabajar con esta herramienta y también es uno de los mas fáciles de solucionar. tranquilo que el equipo gana.
Lee el resto de esta entrada »

Tablas resaltadas en HTML con dreamweaver

pildora_dw.gifSorry por la falta de posts ultimamente, pero de verdad he tenido poco tiempo para publicar entradas, pero casualmente en un proyecto que estoy haciendo tuve que usar este método y pense en publicarlo para que les sea de provecho. (eso sin comentar que es super fácil y bien rapidito de hacer) 🙂

Muchas veces cuando trabajamos para el web tenemos que representar mucha información en una tabla muy grande, algo así como una tabla de excel. cuando hay muchísimos datos como estos, es difícil encontrar lo que se esta buscando, por eso es más fácil para los usuarios si se resaltada cada celda al colocar el cursor encima. de esta manera lo ayudamos visualmente a buscar. 

Para ver el efecto real que haremos tal y como queda, busca y descarga el archivo “tabla_resaltada.zip” en mi BOX de archivos de práctica. hazle doble click al archivo y abre el documento “tabla_resaltada.htm”  con internet explorer. fíjate que al pasar el cursor encima de las celdas de la tabla que esta alli  verás el efecto de las filas resaltadas. eso es lo que haremos en esta práctica.

Aunque el titulo del post diga dreamweaver, realmente esta práctica la puedes hacer facilmente con cualquier editor de páginas web, como frontpage o cualquier otro que uses. yo en mi caso uso dreamweaver MX, porque siempre me gustó la interfaz de la versión 4 me parece más comoda de usar. en fin. empecemos!
Lee el resto de esta entrada »

Texturas para web con photoshop

pildora_ps.gifHasta ahora me he dedicado a postear procesos simples que te pueden ser de utilidad al afrontar cualquier proyecto de diseño con nuestras herramientas de diseño, pero todavia no he tratado nada del web. de hecho pronto abriré la sección de dreamweaver para practicar un poco de esa exitosa aplicación para el montaje web. Pero antes de eso, tratemos un poco sobre photoshop para el web, y como podemos usar todas las capacidad de esta potente herramienta para nuestro sitio o nuestro blog.

Estoy seguro que una de las cosas que más has visto siempre en las páginas web, es el uso del fondo en la página. o mejor dicho, las texturas que podemos generar en el fondo de nuestro sitio. esto es super fácil de lograr con photoshop y usaremos un metodo super facil y muy similar al pixelart (pixel por pixel) y haremos texturas como estas:

texturas_web.gif

De hecho, no solo lo puedes usar para el web, ya que puedes usarlo para otros trabajos de diseño. y lo mejor de todo es que las posibilidades son infinitas! empecemos.
Lee el resto de esta entrada »