Regresar a la página www.ComoCrearTuWeb.com
Página 1 de 2 12 ÚltimoÚltimo
Resultados 1 al 15 de 22

Tema: [TUTORIAL] Diseño Web Profesional

  1. #1
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    07 jul, 08
    Mensajes
    343
    Poder de Reputación
    15

    [TUTORIAL] Diseño Web Profesional

    Hola amigos, hoy les traigo una tecnica muy usual para los diseños y paginas web...

    Se han preguntado... "Como rayos hacen para que las webs se miren tan geniales" bueno, hoy les traigo la respuesta a esas preguntas.... no esperen aprender mucho HTML con mi tutorial, yo soy una persona muy practica, y evito trabajar de mas...

    Lo que se necesita para un diseño genial, es un cambio de enfoque... cuando nos referimos al diseño web, nos referimos a DISEÑO + WEB eso significa que necesitamos ir en orden...

    1ro: Esta el diseño
    2do: Estan los elementos que hacen que este se adapte a la web

    Y que mejor para un buen diseño, que un buen programa de diseño

    Para seguir este tutorial, necesitaran Adobe Photoshop CS2 o superior, no voy a suministrarles un link para la descarga full, pero pueden usar la version de prueba de CS4 que esta disponible en la pagina oficial de adobe, es por 30 dias, y suficiente para llevar este tutorial

    www.adobe.com

    me imagino que todos han oido hablar de Photoshop, bueno... este es un programa con el cual pueden hacer imagenes.. me preguntaran entonces: Wtf? no era un tutorial para crear un sitio web con un gran diseño?

    R: SI

    Y vamos a usar photoshop para hacer nuestro diseño Y para marquetar la web :) SI SEÑORES, NO ME VOLVI LOCO, esto es perfectamente posible.... de hecho, la mayoria de los diseñadores web lo usan

    Bueno, vamos a comenzar configurando nuestro espacio de trabajo... definamos

    1ro: La resolucion ideal de mi sitio

    las resoluciones mas comunes son 800X600 y 1024X768 como la primera es poco comun, yo hare mi web para una resolucion de 1024X768

    Entonces en Photoshop, una vez que lo hayamos abierto vamos a irnos a

    File ---> New

    Y vamos a configurar el documento en: 1000x980

    Porque 980? para darle un espacio de scroll a la web, porque 1000 para darle margenes a la web

    Bueno... Hay cosas que no explicare demaciado... yo prefiero ir usando varios layers diferentes para mis diseños, pero eso no es muy importante a la hora final..., bueno... lo que tenemos que hacer ene l nuevo documento es el diseño que queremos para nuestra web, en mi caso.. y como es para este tutorial, hize algo muy basico



    Una vez que tenemos listo nuestro diseño, es hora de convertirlo en una web... bueno, vamos a tomar la herramienta "slice" (no se si asi se llame, pero asi le digo yo XD)

    [img]http://api.ning.com/files/J96trQV0Pr7yt5AKZfE4*lcZOmzBjQ7G341lEP9HntZe5tlA6k uu7ekRI0RPDzfMOmKCFbMwbw7lcL3YNLDLh0a4BtFZDVnC/3.JPG[/img]

    Luego, lo que tenemos que hacer, es marcar todas las areas que diferenciaran la web, cada uno de los cuadritos que marquenos sera una tabla que contendra la imagen que seleccionemos...

    Una vez que terminen, veran algo asi:

    [img]http://api.ning.com/files/J96trQV0Pr6buaY5e8vvp87-29ETEIDxeDcXynn2e7VC-MSuvDP4TAo986X*YuWWXF6EbL4-sqHJ9cMBlaoE1yI1VNnrrRHN/4.JPG[/img]

    Luego de eso.... se van a File ---> save for web



    Veremos una ventanita algo asi, eso es para los retoques o recortes extras que quieran hacer.... bueno, no explicare mucho esta parte... ahi seleccionan el formato de las imagenes y todo eso XD... le dan "save"

    Se van a crear un archivo HTML y todas las imagenes de la web en una carpeta...



    Bueno, si abren el archivo HTML ya podran ver si sitio... pero realmente eso solo son un monton de tablas con imagenes dentro XD es hora de arreglar ese desmadre... yo lo hago desde el Dreamweaver, ya ustedes podran usar el programa que quieran

    Lo que hay que hacer, es pasar lo que esta asi:

    Código:
    <td colspan="2" rowspan="2">
    			[img]images/plantilla_35.gif[/img]</td>
    hay que convertirlo en:

    Código:
    <td colspan="9" rowspan="4" background="images/plantilla_35.gif"></td>
    en e dreamweaver es mas facil, solo cuestion de copiar la ruta de la imagen, y luego ponerla de fondo de la celda



    Y listo
    ya ven que facil, y que bonito sitio el que les quedo? ya los efectos y eso, es CSS y ustedes ya saben como hacerlo ;)

    si quieren el dreamweaver y el photoshop full manden un MP (este tuto es exclusivo para comocreartuweb) ni en mi sitio lo hize, si lo van a copiar pongan un enlace

    Hi-Tech [R]evolution

    Un saludo, ciao....

  2. #2
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,701
    Poder de Reputación
    69
    geniaaaaaaaaial

    :D :D :D :D :D :D

    muichisimas graciaaaaaas
    pondrá manos a la obra

    saludos

    *****por el momento lo pondré como post aqui**

    pero su destino será en photoshop y en tutoriales

    un beso
    ______________________________________

    reparacion de rines


    _____________________________________

  3. #3
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 dic, 07
    Ubicación
    Valencia (España)
    Mensajes
    1,720
    Poder de Reputación
    23
    Yaneth:

    Me alegro de que lo pusieras como post, porque lo del amigo Mzestudios presiento que va a ser muy agradecido.

    Mzestudios, buena idea, buen aporte.

    ---.Saludos.---

  4. #4
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,701
    Poder de Reputación
    69
    Si, si nadie tiene inconvenientes
    lo dejamos aqui por una semana o dos, ya
    que la mayoria, visita este foro directamente
    ya luego lo movemos a donde debe estar
    jejeje

    ***espero no venga jorgens y me regañe, ***
    ______________________________________

    reparacion de rines


    _____________________________________

  5. #5
    Esto empieza a ser un vicio... Habitante Avatar de nosabernada
    Fecha de Ingreso
    02 ago, 08
    Ubicación
    Velar por CCTW
    Mensajes
    1,418
    Poder de Reputación
    21
    Hola,

    me gusto tu tutorial, facil, rapido y bueno

    Yo lo he intentado probar, pero cada vez que lo hago, al venir a guardar, o se me cierra el photoshop (en mi version XP) o se queda colgaado sin responder (vista), alguien me puede decir el porque?

    Adios

  6. #6
    Recien Llegado! Merodeador
    Fecha de Ingreso
    31 ene, 09
    Mensajes
    3
    Poder de Reputación
    0
    Gracias por ayudarnos a los que empezamos con esto

  7. #7
    Me va gustando esto... Habitante
    Fecha de Ingreso
    20 ene, 09
    Ubicación
    En mi casa
    Mensajes
    61
    Poder de Reputación
    13
    EDIT:Hmmm ya me consegui el programa ^^

  8. #8
    Me va gustando esto... Habitante
    Fecha de Ingreso
    11 ene, 09
    Mensajes
    31
    Poder de Reputación
    13

    pedido

    Amigo si fueras tan amable y me manadaras el photoshop y el dream ,full, te lo agradesco, gracias,aqui te va mi email:
    elidancer32@hotmail.com

    Gracias

  9. #9
    Recien Llegado! Merodeador
    Fecha de Ingreso
    05 feb, 09
    Ubicación
    chile
    Mensajes
    3
    Poder de Reputación
    0
    graciasssss

  10. #10
    Me va gustando esto... Habitante
    Fecha de Ingreso
    02 ene, 09
    Mensajes
    43
    Poder de Reputación
    13
    gracias!! Pero una pregunta, el diseño de la web, como se puede hacer??? Yo es que de photoshop, aunque ya hace q tengo el programa, lo justo.

    Graciñas, saludos

  11. #11
    Esto empieza a ser un vicio... Habitante Avatar de nosabernada
    Fecha de Ingreso
    02 ago, 08
    Ubicación
    Velar por CCTW
    Mensajes
    1,418
    Poder de Reputación
    21
    Hola,

    pues mira, el diseño lo puedes hacer como te venga en gana, pero luego lo guqardas y lo pasas a photoshop como nos indica nuestro amigo MzStudios y lo haces como quieras, includo con el paint si quieres.

    Adios

  12. #12
    Recien Llegado! Habitante
    Fecha de Ingreso
    06 nov, 08
    Mensajes
    28
    Poder de Reputación
    14

    Re: [TUTORIAL] Diseño Web Profesional

    Hola, buena idea, solo ahi k tener un poco de idea de diseño

  13. #13
    Me va gustando esto... Habitante
    Fecha de Ingreso
    13 mar, 09
    Mensajes
    187
    Poder de Reputación
    13
    Mirar yo siempre pensado que hay empezar por ahi, pero que yo cuando trabajo utilizo mucho las tablas y capas a la vez, y que hagas una plantilla con PhotoShop bastante buena luego para mi personalmente, no sale los resultados graficos como uno quiere, primero boceto y segundo tu cabeza con la rapidez con Dreamweaver seria mucho mejores resultados.

    Yo no tardo tanto en montar un index si el cliente lo paga y confia en mis diseño perfectamente le podria montar un buen diseño.

    Saludos.

  14. #14
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    07 jul, 08
    Mensajes
    343
    Poder de Reputación
    15
    Cita Iniciado por TIFORO
    Mirar yo siempre pensado que hay empezar por ahi, pero que yo cuando trabajo utilizo mucho las tablas y capas a la vez, y que hagas una plantilla con PhotoShop bastante buena luego para mi personalmente, no sale los resultados graficos como uno quiere, primero boceto y segundo tu cabeza con la rapidez con Dreamweaver seria mucho mejores resultados.

    Yo no tardo tanto en montar un index si el cliente lo paga y confia en mis diseño perfectamente le podria montar un buen diseño.

    Saludos.
    supongo que es cuestion de tecnica, ya con algo de experiencia, puedes utilizar tus propios metodos..

  15. #15
    Me va gustando esto... Habitante
    Fecha de Ingreso
    22 feb, 08
    Ubicación
    Depende
    Mensajes
    63
    Poder de Reputación
    15

    Interesante...

    Cierto. Precisamente ahora estoy empezando a interesarme por los aspectos formales de las webs. Hasta ahora solo me interesaban los contenidos.
    Diversos trucos útiles para navegación y merodeo costeros en kayak y en velero: http://www.porlacosta@ergosum.es

Temas Similares

  1. Insertar un Buscador Interno PROFESIONAL [TUTORIAL]
    Por *Blaizer* en el foro Tutoriales Varios
    Respuestas: 43
    Último Mensaje: 04/04/2012, 14:20
  2. Recomendaciones de un profesional xf.
    Por ElCasera en el foro Hosting
    Respuestas: 8
    Último Mensaje: 17/03/2009, 20:29

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •