Página 1 de 7 1 2 3 ... ÚltimoÚltimo
Resultados 1 al 10 de 61

Tema: WebSite desde 0 by MiloMyth "parte 1"

      
  1. #1
    Avatar de milomyth
    milomyth está desconectado
    Algo sabe de esto...
    Fecha de ingreso
    26 Aug, 06
    Ubicación
    En algun lugar de mi mente
    Mensajes
    311

    Predeterminado WebSite desde 0 by MiloMyth "parte 1"

    Hola pos hace 3 dias me puse en la construccion de este Tutorial para que aprendan como hacer una pagina web desde 0

    ***nota es importante que tengan conosimientos basicos de Photoshop, Imagen Ready y Macromedia DreamWeaver

    empesemos

    Diseño

    1.-lo primero que vamos a hacer es crear un documento nuevo con dimencindes de 800*600 pixeles
    con fondo blanco o transparente.

    **si no tienes la opcion de reglas ve a ver/Reglas o preciona ctrl+R

    Creacion de Baner

    2.-marcamos la guias dende ira cada una de las secciones como se puestra en la
    imagen




    Seleccionamos la opcion de lazo poligonal y marcmos la seleccion del baner



    3.-creamos una capa nueva rellenamos la seleccion de cualquier color y le
    ponemos las propiedades de la capa como se muestra en la imagenes






    presionamos OK

    despue nos vamos a seleccionar/modificar/contraer y lo contraemos 5 pixelesy precionamos en ok



    ahora presionamos suprimir en nuestro teclado

    sin perder la selecicona creamos una capa nueva la colocamos enmedio de capa 1 y capa 2

    en esta capa crearemos una fondo para el baner son libres de hacer el fondo que ustedes deseen

    no creare un fondo muy vistoso recuerden solo les enseño ustedes desinden los efectos que le pondran

    asi hise el mio jaja algo feo xDD...



    ahora quitemos la guia para eso vamos a ver/clear guides o limpiar guias

    4.-creamos unas nuevas guias para marcar las posisiones de el cuadro de menu el de contenido
    y el de afiliacciones



    en una capa nueva crearemos con la herramienta de seleccion la cabesera del recuadro
    y la rellenamos de este color "c9c9c9" sin los parentesis ahora vamos a editar/transformar/distorcion

    precionando shif arrastramos el cuadrado de la esquina inferioir derecha y izquierda uno
    a la ves asta tener algo como esto



    hacemos lo mismo con los demas recuadros pero sin crear capa nueva hasta tener ago asi



    nos vamos a capa/estilo de capa y colocamos los siguiente



    nos vamos a seleccion despues modificar y contraer lo contraemos 2 pixeles y precionamos suprimir en nuestro teclado nos quedara algo asi





    sin perder la seleccion creamos una capa nueva y lo rellenamos con el mismo estilo del fondo del baner o con el efecto del
    borde del baner como en mi caso



    ahora terminemos con lo cuadros...

    para esto crearemos una capa nueva

    presten atencion a la imagen ya que en esta se mira donde deven de estar las selecciones
    como son varias guias aveses te confundes



    puedes seleccionar de uno por uno o los 2 a la vez solo recuerda que los 2 deven de estar en una misma capa

    ahora rellenamos de cual quien color y colocamos las siguientes propiedades de la capa






    precionamos ctrl+D y marcamos el cuadro del centro... creamos una nueva capa y colocamos
    las mismas propiedades





    vueno ya solo falta colocarle los ultimos retoques (Botones, imagenes y detalles)

    recomiendo no colocar texto ya que eso retardaria la carga de la paguina es recomendable
    colocarlo en el codigo html

    vallamos a ver/limpiar guias o clear guides

    para crear los botones creamos las siguientes guias ***nota solo crearemos 3 botenes




    la manera mas rapida de crear los bontones es la siguiente...

    creamos una nueva capa y seleccionamos los 3 botones como se muestra en la imagen



    utilisamos es el gradien y rellenamos la seleccion



    creamos una nueva capa y utilisando el lapiz en color blanco y con un ancho de 1 px
    lo pasamos por encima de las lineas de adentro

    creamos una mascara y con el gradian la pasamos de derecha a izquierda vamos a ver/limpiar guias
    y nos quedara algo haci




    ahora colocamos el texto deseado



    guardamos el documento con el nombre de (index) sin parentesis

    ahora vamos a capa/flatten imagen no recuardo tradiccion les dejo la imagen
    nos devio de aver quedado una sola capa llamada fondo



    ahora precionamos ctrl+shif+M esto mandara nuestro documento a imagen ready

    esta es la parte 1 o parte de diseño la parte 2 se trata de cortes en Imagen Ready

    Saludos

  2.  
  3. #2
    Avatar de Niukua
    Niukua está desconectado
    Realmente sabe de esto!
    Fecha de ingreso
    24 Jun, 06
    Ubicación
    Madrid
    Mensajes
    987

    Predeterminado

    Muchas gracias por el tuto, ahora me voy a mirar las siguientes partes, ya tenia yo ganas de encontrar algo así y yo no sé que he hecho que no lo he visto antes, a ver si me meto un poco con el diseño de webs, que tengo ganas.
    Gracias otra vez por tu esfuerzo.
    Besotes!!!


  4. #3
    Avatar de milomyth
    milomyth está desconectado
    Algo sabe de esto...
    Fecha de ingreso
    26 Aug, 06
    Ubicación
    En algun lugar de mi mente
    Mensajes
    311

    Predeterminado

    Gracias Niukua

    es interesante todo lo que puedes hacer con photoshop e imagen ready.

    P.D. Este diseño esta feo pero solo era un ejemplo, tu puedes hacer todo lo que tu imaginasion y tus conosimientos con photoshop te lo permitan, solo es cuestion de practicar.

    Saludos


  5. #4
    Avatar de El Nitro
    El Nitro está desconectado
    Soy muy, muy bueno!!
    Fecha de ingreso
    02 Dec, 06
    Ubicación
    España
    Mensajes
    1,438

    Predeterminado

    Un pedazo de tutorial . Photoshop llega a cualquier parte de creacion y diseño . Gracias por compartirlo milomyth. Un saludo


  6. #5
    Avatar de joan_makoy
    joan_makoy está desconectado
    Novato absoluto
    Fecha de ingreso
    14 Dec, 06
    Mensajes
    36

    Predeterminado

    MUY BUEN TUTORIAL


  7. #6
    Avatar de PaBlOk
    PaBlOk está desconectado
    Ya no soy novato!
    Fecha de ingreso
    05 Dec, 06
    Ubicación
    Los Angeles, Chile
    Mensajes
    190

    Predeterminado

    oye milomyth que fuente es la que usas en tu firma


  8. #7
    uJuan está desconectado
    Novato absoluto
    Fecha de ingreso
    29 Dec, 06
    Mensajes
    45

    Predeterminado

    algunos imágenes no se ven


  9. #8
    ../psh está desconectado
    Ya no soy novato!
    Fecha de ingreso
    24 Aug, 06
    Ubicación
    Murcia
    Mensajes
    116

    Predeterminado

    En mi opinión, Photoshop es indispensable para crear una web con un buen diseño, pero si no se sabe de leguajes de programación para web dificilmente se puede hacer algo dinámico y optimizado.


  10. #9
    Avatar de mask
    mask está desconectado
    Medio novato...
    Fecha de ingreso
    08 Nov, 06
    Mensajes
    92

    Predeterminado

    Exelente tuto una pregunta como ases las
    lineas verdes las de la regla


  11. #10
    Avatar de mask
    mask está desconectado
    Medio novato...
    Fecha de ingreso
    08 Nov, 06
    Mensajes
    92

    Predeterminado

    Hola es un fantastico tutorial
    exlente gracias milomyth
    aqui dejo una prueba de lo que
    estoy aciendo salu2.


Página 1 de 7 1 2 3 ... ÚltimoÚltimo

Temas similares

  1. WebSite desde 0 by MiloMyth "parte 3"
    Por milomyth en el foro Tutoriales Photoshop
    Respuestas: 66
    Último mensaje: 08/01/2011, 20:16

Etiquetas para este tema

Permisos de publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •  
Photoshop Designs v2.0
Photoshop designs es una comunidad dedicada a Photoshop, el retoque fotográfico, la fotografía digital, el arte digital, 3d, el diseño Web y otros programas de edición de imágenes como Corel photopaint, corel draw ó GIMP. Entre sus páginas encontraréis cientos de tutoriales photoshop y de retoque fotográfico, cursos de fotografía, concursos, información sobre cámaras digitales, soporte photoshop, miles de recursos photoshop, una increíble galería photoshop y un blog que recopila los mejores tutoriales y recursos que se publican a lo largo de toda la red
Compartir
Photoshop Designs v1.0
Visita Photoshop Designs v1.0
Búsqueda personalizada

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52