Este es el primer video tutorial que grabo y publico en mi pagina web.
No olvides votar por el video en youtube
La idea era mostrar como se hace el diseño (layout) del sitio antes de proceder a maquetarlo, en un futuro tutorial publicaré el
proceso de convertir este diseño en XHTML y CSS.
Primero voy a resumir el video:
El primer paso es crear un nuevo archivo en Photoshop, el ancho depende de nuestro diseño, vamos a ver algunas pautas para ello
Lineas Guia
Para hacer nuestro diseño es necesario definir un ancho que sea compatible con la mayoría de monitores, lo cual suele ser 1024 x 768px sin embargo hay varios pixeles que ya son ocupados por el propio navegador asi que como tamaño máximo no debemos usar mas de 1000px de ancho, si además desea poner un fondo visible lo mejor sería no exceder del 960px. Con Photoshop procedemos a poner estas primeras guias que fijaran el ancho del sitio.
Estructura de las Capas
Es imporatnte ser ordenados al momento de diseñar, eso ayudará mucho al programador o a nosotros mismos nos ayudará a hacer cambios posteriores por lo que sugiero crear una carpeta por cada sector: encabezado, menu, contenido,… y dentro de estas otras carpetas por ejemplo dentro de encabezado iria logo, slogan…..
Videotutorial Photoshop
Descarga el layout photoshop
Puedes bajar el archivo photoshop creado en el video desde AQUI
Gracias por el video!, no sabía eso de las guías en photoshop, esa chorrada me ayudará mucho en el futuro 😀
Hola!
Me gusto mucho tu pagina, me gusta el orden y la claridad sobre todo cuando se trata de exponer tutoriales, pienso que es de utilidad; con respecto al video, me parece bueno, la unica observacion que tengo es que en ocaciones mueves muy rapido el puntero y no se ve exactamente la instruccion que ejecutas, y bueno si la intencion es ensenar como hacer algo en especifico,considero que se tiene que ser un poco mas \
Es mi primer video tutorial, si hay varios detalles que corregir, la proxima vez espero ponerle audio y mostrar un sector mas grande de la pantalla para que ciertos detalles sean visibles.
Te agradeceria si subes los degradados buen tutorial!!
Hola, lo puedes bajar aqui http://www.dezinerfolio.com/2007/05/06/ultimate-web-20-layer-styles
mira lo unico es que deberias explicar con palabras cada paso que haces