Solo Photoshop

Tutoriales y recursos Photoshop

Bienvenido a SoloPhotoshop, donde encontrarás la mejor información sobre tutoriales, recursos y artículos de Adobe Photoshop!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Anunciar en SoloPhotoshop

Diseño y Maquetado de Plantillas WEB 10 | Solo Photoshop

Tutorial Photoshop

 

Tutorial por Solo Photoshop

Solo Photoshop

DISEÑO Y MAQUETADO DE PLANTILLAS WEB 10

Con Adobe Photoshop, y Macromedia Dreamweaver

Con esta decima entrega junto a Paquo360 llegamos al final de este tutorial, en el que hemos visto el diseño y maquetacion de una web utilizando Adobe Photoshop, Adobe ImageReady, Microsoft FrontPage o Macromedia DreamWeaver con el que terminamos ahora ...

Ahora seguimos con los bordes. hay que aclarara que esta no es la forma más común de crear los bordes de celda en este programas, sin embargo por haberlo hecho así con Front Page emularemos la técnica, es decir utilizaremos estilos con el HTML. Sé que a muchos no les agrada codificar sin embargo es esa la forma más correcta de crear para la web. Lo haremos en 4 pasos y uno extra para conocer mejor Dreamweaver; la imagen lo muestra:

1 Toma por el borde la celda en cuestión y destaca el Selector de Etiquetas.

2.- Presiona sobre el signo + para agregar una etiqueta a la celda seleccionada.

3.- Selecciona Style.

4.- Sobre el renglón emergente escribe el siguiente código, el cual he distinguido con cuatro colores para que aprecies en que parte de cada lado se aplicara el borde (border-bottom, etc) Negro (000000) y Sólido (solid)

Adobe Photoshop

BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid

5.- Si presionas sobre el icono del lápiz sobre papel señalado con el #5 verás las etiquetas que la celda tiene hasta ahora.

Este método se utiliza cuando el borde es en los cuatro lados.

Hacemos lo mismo, agregar la etiqueta style, pero para esta celda solo se necesita el borde arriba y a la derecha. A la izquierda ves el código insertado: Nota la diferencia.

Adobe Photoshop

BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid

Finalmente y para terminar el resto de la celda mayor, la parte baja, tómala y agrega el siguiente código con una Etiqueta Style: BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid

Además la Etiqueta BorderColor: 000000

Adobe Photoshop

Nos queda un detalle para terminar la Plantilla. La pequeña imagen de la esquina, que será modificada en "Photoshop".

Hay varias formas de llevarla, pero la más simple es Clic > Botón Derecho del ratón > Copy.

Una vez en "Photoshop" File > New, Ok Luego: Edit > Paste. Y listo, allí tienes la pequeña imagen.

Con la herramienta Line traza una línea color negro de 1 px entre la unión de los dos colores para simular borde negro de las celdas.

Adobe Photoshop

Aprovecharemos esta parte del tutorial para echarle una mirada al comando Save for Web. Tenemos una imagen en "Photoshop" y debemos editarla de manera que su tamaño os permita utilizarla sin problemas en Internet. De cierta forma ya hicimos esto con "Image Ready", pero ahora le toca turno a "Photoshop".

File > Save for Web

Adobe Photoshop

Finalmente hay que traer de regreso la imagen, ya pintada, y sobre todo optimizada.

Elimina la antigua imagen e inserta la nueva. Ve a Insert > Image navega hasta que la encuentres.

Es deseable que vuelvas a darle formato al HTML y lo limpies, como lo hicimos al principio.

Ya solo Guarda.

Este es el resultado final a Mayor Tamaño

Adobe Photoshop

Ver las demas entregas < 1 > < 2 > < 3 > < 4 > < 5 > < 6 > < 7 > < 8 > < 9 > < 10 >

Comentarios de Diseño y Maquetado de Plantillas WEB 10 | Solo Photoshop

↑ Tutorial

  • mcnadie

    mcnadie

    2006-06-16 13:42

    Muy pero muy bueno Gracias McM
  • zelda

    zelda

    2006-06-16 21:37

    que buen tutorial...gracias por la ayuda ^^M
  • solidushound

    solidushound

    2006-06-17 18:43

    n_n los felisito, todos sus tutoriales son muy buenos. [s0L1d-E66]M
  • jean2558

    jean2558

    2006-06-18 12:46

    esta muy bueno pero bueno lo unico que no puede hacer es que la platilla no fuese en dreamweaver una imagen si no una caja para introduccir la info si alguien puede ayudarme black heart M
  • felunar

    felunar

    2006-06-25 16:42

    les felicito por el super tuto gracias.............M
  • nica_snake

    nica_snake

    2006-06-26 17:06

    Exelente!!! Realmente esta es la mejor pagina en lo referente a tutoriales de este tipo. M
  • edgar10r

    edgar10r

    2006-06-30 15:26

    Excelente gracias y sigan adelante.. ustedes hacen la diferenciaM
  • pdgago

    pdgago

    2006-07-04 16:40

    muy bueno sigan asiM
  • yoelxD

    yoelxD

    2006-07-04 18:00

    excelente...lo mejor...y lo aplaudo...M
  • Shaorin

    Shaorin

    2006-07-05 20:13

    Ah que bueno encontrar un tutorial de este tipo. ¡Gracias!M
  • dkm.bll

    dkm.bll

    2006-07-13 23:28

    lo maximo gracias muchachos por su tiempo...M
  • Linda_Andrea_Bogota

    Linda_Andrea_Bogota

    2006-07-14 01:39

    Gracias esta muy bueno, mil bendiciones!!!M
  • raqadem

    raqadem

    2006-07-14 10:59

    original que sencillo se ve, pero buenoM
  • lUCY

    lUCY

    2006-07-18 15:17

    Mi agradecimiento y mis felicitaciones por tan magnífico tutorial.Sólo me queda hacer dos preguntas al respecto de este tutorial: 1. ¿Dónde está la "Carpeta del Almacén", citada en la primera parte, para lo de las imágenes? 2. ¿Hay posibilidad de descargar este tutorial completo de una sóla vez?...Me gustaría descargarlo para consultarlo en cualquier momentoM
  • pacmoc

    pacmoc

    2006-09-15 11:44

    muchas gracias, muy interesante.M
  • Morenazza

    Morenazza

    2006-09-18 10:47

    Felicidades por estos espectaculares Tutoriales........muy claros y lo mejor de todo muy entendibles... Muchas, Muchas pero Muchas Gracias por este gran aporte a nosotros los NO tan expertos!!!!M
  • vinicioWEB

    vinicioWEB

    2006-09-20 11:36

    EXCELENTE VUESTRO TUTORIAL, ME SIRVIO DE MUCHO. SALUDOS A TODOS VOSOTROS M
  • raqadem

    raqadem

    2006-09-20 17:40

    hey que facil lo hacen ver gracias y asi sigan......M
  • jlpolentino

    jlpolentino

    2006-09-22 07:04

    excelente tutorial, me gusto mucho porque lo pude aplicar para el maquetado de un ejercicio de clase. gracias M
  • leira67

    leira67

    2006-09-25 07:49

    El Tutorial es buenisimo, graciasM
  • Nixon Guillermo

    Nixon Guillermo

    2006-09-25 22:17

    gracias por ayudarnos, este tutorial es el inicio de una obra maestra, y gracias otra vezM
  • katsuya

    katsuya

    2006-10-19 17:01

    gracias a tu tutorial por fin e acabado mi pagina gracias M
  • pimentel88

    pimentel88

    2006-10-25 19:53

    la mejor maquetacion es estasM
  • miarle

    miarle

    2006-10-30 15:14

    Felicidades por el tutorial me va a quitar algun dolor de cabeza. Gracias!!!! M
  • orman

    orman

    2006-11-01 13:51

    esto me va ayudar mucho para algun diseño, lo unico que necesito una web para alojar M
  • bravata007

    bravata007

    2006-11-02 19:34

    muy bueno gracias por compartirlo... nada mas una cosa,, no se puede saltar el paso de Front Page y hacerlo en Dreamweaver??? gracias M
  • bosspetta

    bosspetta

    2006-11-08 09:47

    Olviden las tablas y diseñen con estándares web!!! las tablas están desaconsejadas para maquetar la web entera. Las tablas sólo deben usarse para reflejar datos, que es para lo que fueron creadas, nunca para diseñar.M
  • SilverWinter

    SilverWinter

    2007-01-09 01:14

    muy bueno la verdad... muchas gracias por el aporte...M
  • nimbo

    nimbo

    2007-01-09 12:08

    genial! una herramienta muy util! gracias!M
  • Claudia Durá

    Claudia Durá

    2007-03-05 10:53

    Exclelente el material!!! sigan así.Muchas gracias.M
  • betomares

    betomares

    2007-03-25 21:08

    no puedo introducir datos ya estando en dreamweaver pork me salen como imagenes todas las celdas , que puedo hacer o de ahi en adelante que mas sigue? Gracias por su dedicacion, FelicidadesM
  • gabo75

    gabo75

    2007-05-11 16:09

    Muy buenos tutoriales desde el primero los felicito.M
  • luchex

    luchex

    2007-07-17 11:09

    soy nuevito y me parece muy bueno el material... gracias y felicidadesM
  • Arielitu

    Arielitu

    2007-10-03 03:25

    interesante graciasM
  • joyma

    joyma

    2007-10-16 12:32

    El tutorial me ha servido para hacer la portada de la web; pero ahora tengo problemas para poder subir las fotos, ya que quisiera hacer una web fotográfica. ¿ Alguien me puede explicar como se hace? Gracias. JoymaM
  • juanpablod

    juanpablod

    2007-12-13 04:39

    me gustaria que ponga el tutorial en archivo para editarlo en photoshop . con los tutoriales de shakira (para aprender)de este mismo portal M
  • ahome

    ahome

    2008-02-01 18:01

    muchas gracias por el manual, lo voy a intentarlo hacerlo gracias.M
  • adiction

    adiction

    2008-03-03 11:00

    BUENO... ACABO DE GUARDALAS TODOS LOS TUTOS.. PA LEERLOS EM MI CASA.. JEJ..GRACIAS MAESTROS.. ESTO ERA LO QUE ESTABA BUSCANDO.. Y AHORA MANOS A LA OBRA PS.. Y A QUE CREAR NUESTRAS PROPIAS PLANTILLAS...M
  • moises aldana

    moises aldana

    2008-05-30 12:20

    como publicas la pagina ya creada en dream para internet y que todos la puedan ver.. gracias..!!!M
  • goyita

    goyita

    2008-09-05 12:55

    Que tutorial tan buenisimo, explica con detalles nada complicados. Gracias.M
  • jhuaraya

    jhuaraya

    2008-10-01 06:56

    muy bueno el tutorial, felicitaciones, pero tengo una consulta: como hago para que en photoshop digite el texto y en dreamweaver pueda editarlo ese texto?M
  • soltrix2009

    soltrix2009

    2008-10-24 15:48

    Excelente, el tutorial, me gustaria poder implementar esto en phpM
  • angelitos11

    angelitos11

    2008-12-16 19:32

    soy nuevo en esto, me parece muy bueno, gracias por los tutorialesM

↑ Tutorial