Solo Photoshop

Tutoriales Adobe Photoshop

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

Ingreso de Usuarios

Recuperar Contraseña?

Registro de Usuarios

Diseño de una Pagina Web con Photoshop CS parte 1

Video Tutorial Photoshop de Interfaces y Diseño Web

 

Tutorial por Paquo360 de Sólo Photoshop

SoloPhotoshop

Publicidad

  • Anunciar en Solo Photoshop
  • Anunciar en Solo Photoshop
En esta primera entrega arranco ya con las guías dispuestas de acuerdo a lo que voy a crear, además de tener al lado un psd con las imágenes que se van a agregar y otro con fragmentos de texto Lorem Ipsum, todo para ahorrar tiempo y no distraer mi atención.

---------
Este video no pretende ser un detallado tutorial de como se dibuja una pagina web, simplemente es un ejemplo de como desarrolle este diseño, por lo que esta dirigido a usuarios con un nivel de Medio a Avanzado en el manejo de Photoshop quienes dominen a la perfección las Herramientas Básicas del programa. Es algo extenso, así que lo hemos dividido en 4 partes de 5 mins. cada uno. La canción en esta primera parte es "Eyes on Me" de Faye Wong, la que escuche por primera vez en el juego Final Fantasy VIII.
---------

Desarrollo.
- El documento con fondo RGB con fondo transparente tiene un tamaño de 738 X 226 px.
- Primero se rellena el fondo con el color 843B00, el cual también tomaré como base para los demás colores.
- Luego se crea la base del diseño y se rellena de blanco (ffffff)
- Se agrega la primera imagen a la izquierda.
- Entonces una columna central que será la base del menú, esta se hace con un degradado un poco inclinado.
- Se continúa con una columna derecha que soportará mayormente los contenidos de la pagina, en especial del home.
- Viene entonces una sombra entre la columna central y la derecha.
- Se agregan otras dos imágenes externas. Se ajusta su tamaño y se agrega un borde. Con en cambio de tamaño una se difumina un poco, lo cual se revierte con una máscara de enfoque.
- Finalmente se agrega una base a la imagen izquierda, luego veremos para que.

Espera un momento mientras carga el video...

Esta es tan solo la primera de 4 partes. Al final quedará así:

Diseño de una pagina web

Diseño de una Pagina Web 1 Guias

- Diseño de una Pagina Web con Photoshop CS 1

- Diseño de una Pagina Web con Photoshop CS 2

- Diseño de una Pagina Web con Photoshop CS 3

- Diseño de una Pagina Web con Photoshop CS 4

Si tienes dudas recurre a nuestro foro de ayuda con un clic aquí

Comentarios de Diseño de una Pagina Web con Photoshop CS parte 1

↑ Tutorial

  • cucaracha

    cucaracha

    2006-10-17 11:08

    muy bueno, espero ansiosamente la 2º parte

    Responder

  • shidartha

    shidartha

    2006-10-17 11:28

    esta muy bien, pero porfavor podrias si no es mucho pedir poner el documento con las guias, para ir practicando. Gracias.

    Responder

  • Paquo360

    Paquo360

    2006-10-17 11:33

    Pondré un jpg, con las guías y de ahí las puedes rehacer ustedes.

    Responder

  • salco

    salco

    2006-10-17 14:00

    está my bueno pero fuera mejor el documento con la guía para los que no tengan mucho dominio, vayan practicando, pero me gusta cantidad

    Responder

  • ryckyhn

    ryckyhn

    2006-10-17 15:54

    necesito saber como se guardan los diseños para pasrlos a pagina web marvinricardo@gmail.com

    Responder

  • pressesman

    pressesman

    2006-10-18 21:52

    Genial, esperaré el próximo video, pues manejo Photoshop pero solo para la edición de imagenes y me gustaria desarrollar y maquetar Web por este preograma ya que me parece el mejor

    Responder

  • La voz dormida

    La voz dormida

    2006-10-18 23:26

    La verdad si esta bueno esto de hacer paginas web con photoshop, solo que deberias poner los pasos a seguir para los que apenas vamos empezando con esta onda sepamos que hacer, de cualquier forma, felicidades esta super

    Responder

  • paquo360

    paquo360

    2006-10-19 15:45

    Para los recientes en Photoshop les recomiendo que antes vean los tutoriales donde se explica muy detalladamente como elaborar una plantilla web con photoshop, image ready y dreamweaver.
    http://www.solophotoshop.com/Tutorial-Disenio-y-Maquetado-de-Plantillas-WEB-1-c-217.html
    http://www.solophotoshop.com/Tutorial-Disenio-de-Interfases-WEB-1-c-205.html
    Y en general a todos los tutoriales que hay en la sección de Interfases y diseño Web:
    http://www.solophotoshop.com/Tutoriales-Interfases-y-Disenio-Web-c-3.html

    Responder

  • carlos torres

    carlos torres

    2006-10-20 13:28

    perfectooooooooooooooooooo

    Responder

  • kotguess

    kotguess

    2006-10-20 14:48

    Muy bueno. Espero el segundo de la serie pero coincido con quienes piden un muestra de este trabajo en un documento que puedas consultar cada vez que sea necesario sin tener que estar viendo el video.


    Saludos

    Responder

  • ELNENE

    ELNENE

    2006-10-23 19:47

    como podria obtener el video para poderlo ver

    Responder

  • delprado

    delprado

    2006-10-26 13:38

    es smith de boca chica, gracias por esto

    Responder

  • TheSaintRuleX

    TheSaintRuleX

    2006-10-27 13:54

    Muy Buen el tutorial se aprende mucho.... Saludos de Venezuela... Seguire a ver a la final visiten el site http://www.grupochamos.com

    Responder

  • dino

    dino

    2006-10-28 20:11

    Bueno Necesito Que Me ayudes a CREAR UNA PAGINA WEB GRATIS!

    PORFAVOR!

    deog_14@hotmail.com

    Responder

  • Otakumail

    Otakumail

    2006-10-30 15:42

    El tamaño del documento tiene que ser ese?

    Responder

  • jjar

    jjar

    2006-10-31 11:54

    Excelente ayuda.

    Responder

  • loloesteban

    loloesteban

    2006-11-06 11:28

    Me gusta.

    Responder

  • andreu77

    andreu77

    2006-11-08 00:25

    Excelente no puedo esperar por la 2da parte

    Responder

  • bosspetta

    bosspetta

    2006-11-08 08:57

    Ya veo que nuevamente habéis borrado mi comentario. Así que me imagino es este durará poco. La verdad es que en esta web se encuentran cosas interesantes, pero no se os ocurra opinar algo que no les guste a los admins porque no lo borran... ya me han borrado 3 comentarios... por cierto, yo también estoy deseando ver la segunda parte del tutorial, no me creo que se cuelgue un artículo de como hacer una web y lo hagan a base de "tablas"... eso dejó de hacerse y recomendarse hace años... pero bueno, como este comentario va a ser borrado...

    Responder

  • Pjames

    Pjames

    2006-11-09 07:30

    bueno, estoy muy contento con esta pagina y me ayuda mucho...pero tambien quisiera que me explicaran que "...lo hagan a base de tablas...", no entiendo. por lo demas son tutoriales muy buenos.

    Pd. Bosspetta si pudieras publicar tu aclaracion, seria interesante. mi email: jamesneoo@gmail.com, gracias

    Responder

  • bianca86

    bianca86

    2006-11-14 20:59

    Excelente, espero un documento con los pasos para que pueda praticar, gracias

    Responder

  • sertorres2003

    sertorres2003

    2006-11-18 12:14

    Estos tutoriales estan bueno pero de que sirve si la enseñanza, o muestra de algo importante e interesante para aquellos que nos gusta el diseño web; no se hase, lento y pausado, a y por supuesto con audio. Nota 3

    Responder

  • radio

    radio

    2006-11-30 10:44

    Esta perfecto, siempre recurro a esta página por los contenidos que no encontre en ninguna otra, LES FELICITO ENORMEMENTE POR LA LABOR QUE HACEN. Y aprovechando el momento quiciera saber si alguien de encargado del tutorial pudiese enviarme ese VIDEO POR EMAIL, lo necesito extraordinariamente y no cuento con acceso a internet ultimamente, por tal motivo quiciera saber si pueden enviar a mi EMAIL los TRES VIDEOS que ya estan vigentes o si puedo descargarmelos con algun programilla como los atrapadores de flash y demas. Espero atenciosamente vuesta ayuda.

    Responder

  • radio

    radio

    2006-11-30 10:47

    MI EMAIL: ronalde2003@gmail.com

    Responder

  • shashito

    shashito

    2006-12-05 17:10

    muy bien he ta chevere, espero la segunda parte...ed_rev@hotmail.com

    Responder

  • markdesign

    markdesign

    2006-12-06 03:21

    bueno y muy bien la explicaci{on y pausada---gxs espero la siguienye

    Responder

  • vicotec

    vicotec

    2006-12-06 09:16

    muy bien estuvo bien chida

    Responder

  • javitierna

    javitierna

    2006-12-10 23:30

    no sale como se empiesaaa
    como se pinto el fonfoo
    todo e smuy rapido me marea y kedo en blanko
    =(

    Responder

  • jeily

    jeily

    2006-12-12 18:52

    me gustaria ver la segunda parte

    Responder

  • alexmierda

    alexmierda

    2006-12-13 09:00

    mierda

    Responder

  • pinzboca

    pinzboca

    2006-12-13 22:33

    no se escucha la voz del tutor.
    Mario B

    Responder

  • pinzboca

    pinzboca

    2006-12-13 22:36

    solo se escucha musica, que pasa con la voz del tutor

    Responder

  • yaadein

    yaadein

    2006-12-17 13:02

    ahora ya tengo mas herramientas para diseñar eso me gusta jejeje

    Responder

  • yuvi

    yuvi

    2006-12-20 12:40

    bacano bakno

    Responder

  • Themickiss

    Themickiss

    2006-12-21 12:27

    Buenazo... no me gusto mucho la music.. pero ta super chevere el tuto..
    se agradece... y espero q sigas enseñando he!!!!y dandote el time... seguir haciendo mas de estos...

    Responder

  • Stella Electra

    Stella Electra

    2006-12-28 12:11

    QUIEN ME AYUDA A USAR EL PHOTOSHOP PLEASE!!

    AGREGEN INDUSTRIAL.ENGEL@HOTMAIL.COM

    GRACIAS :D

    Responder

  • juandg

    juandg

    2006-12-29 20:38

    xvr peo me gustqaria saber como aces el dibujo. es decir como sabes q espacio ocupara cad aimagen o nombre

    Responder

  • TRUMAN_1982

    TRUMAN_1982

    2007-01-04 13:07

    man muy bueno tu tutorial
    pero con esas medidas que pones sale muy pequeño el espacio

    Responder

  • carlospen

    carlospen

    2007-01-05 16:21

    Esta bien bueno, aunque a veces dificil de seguir para los que no somos muy veloces mentalmente..SALUDOS DE COLOMBIA.

    Responder

  • nadim

    nadim

    2007-01-06 20:02

    Es bueno el tutorial.Photoshop es muy potente y apenas comienzo a descubrirlo.
    Para mejorar el documento sugiero suprimir la música y que el tutor explique cada paso. Enhorabuena

    Responder

  • pRimo

    pRimo

    2007-01-16 20:56

    chido para alguien q apenas empieza como yo!!!

    Responder

  • fgallard

    fgallard

    2007-01-17 12:07

    mi hermano muy bien, te quedo muy bien el diseño de la pagina web de shakira, pero podrias hacer un tutorial incluido animaciones en flash te lo agradeceria mucho atte
    Fg fgallard23@yahoo.es

    Responder

  • elfakir

    elfakir

    2007-01-23 15:03

    me parecen magunificos los videos, ya que los que no sabemos nada sobre Photoshop podemos hacer alguna cosita guiandonos por ellos.

    Enhorabuena.

    Responder

  • luchomanizales

    luchomanizales

    2007-01-24 11:05

    gracias al diceñador de esta pagina hasta ahora aprendo ha crear imagenes en Photoshop gracias, y seria bueno los pdf para estudiar en sitios donde la red no llgue.

    gracias

    Responder

  • pinzboca

    pinzboca

    2007-01-25 17:50

    señores cada vez que trato de ver el video de diseño de una pagina web 1 solo escucho una cancion no se que pasa, pero ya es bastante tiempo que pasa lo mismo "2 meses" deseo que me envien un mensaje para ver como corrijo este problema

    Responder

  • sneyone

    sneyone

    2007-01-28 13:59

    mis felicitaciones loko grax por la web esta rebuena me a servido bastante sigan asi vale por todos los tutoriales

    Responder

  • gwendal

    gwendal

    2007-01-31 15:04

    Pero de cuanto es exactamente la pagina¿? de que tamaño¿? porque desde luego los que pones no quedan bien, y abriendo directamente el jpg de las reglas queda tambien muy pequeño con respecto a lo que se ve en el vidio. Porfavor, espero sus respuestas aqui o preferiblemente en gwendal_fantasy@hotmail.com gracias

    Responder

  • DNAmatrix

    DNAmatrix

    2007-02-02 22:47

    Braaavo!

    Responder

  • chuyin

    chuyin

    2007-02-04 17:56

    quiero felicitar a todas las personas que colavoran con los tutorials saludos desde los angeles california no a via encontrado un citio en español creo que ya lo tengo

    gracias...

    Responder

  • RICARDOGC

    RICARDOGC

    2007-02-07 15:48

    ESPERO EL SIGUIENTE

    Responder

  • akaryu

    akaryu

    2007-02-09 10:46

    muchas gracias

    Responder

  • MARILUKA

    MARILUKA

    2007-02-14 01:13

    Exelente AMO FOtoshop se peude hacer de todo oigan me pregunto si se podra sacar al Myspace.com diseñar el fondo y todo lo demas???????

    Responder

  • arturo9339

    arturo9339

    2007-02-15 18:01

    creo que para evitar tanto comentario negativo podrias poner el nivel de conocimiento de photoshop. por lo demas esta excelente para los que tenemos la suerte de entender un poco de photoshop. Gracias por tu aportacion... espero mas.

    Responder

  • Regi

    Regi

    2007-02-25 11:47

    Esta muy chulo , algun dia lo pondre en practica.:)

    Responder

  • izhayana

    izhayana

    2007-03-22 21:17

    wooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooow

    Responder

  • chess

    chess

    2007-03-30 16:43

    como puedo descargar los videos para verlos off line en mi pc,
    gracias...

    Responder

  • viche

    viche

    2007-04-09 12:16

    esta muy bueno, por favor como pudedo descargar el video tutorial para trabajar sin conectarme en la red.mi mail es leonardo630@hotmail.com
    gracias

    Responder

  • bonachon

    bonachon

    2007-06-26 16:13

    Q ESTRES ESA CANCION...PON ALGO Q VALGA LA PENA QDARSE MIRNADO EL TUTORIAL

    Responder

  • fedocha

    fedocha

    2007-07-03 13:25

    Las lineas celestes que estan en toda la hoja para que son???

    Hay que hacerlas como se hace???

    Responder

  • Aztekero

    Aztekero

    2007-07-09 00:04

    Mira exactamente lo que quiero preguntar como se hace esas hoja asi? me imagino que es para colocar bien las cosas, pero como se hace?


    ¡1ZALU2

    Responder

  • Aztekero

    Aztekero

    2007-07-18 16:23

    Amigos aqui les dejo para los que no supieron como hacer las guias - bases como empieza nuestro amgio para que lo descargen esta en .psd

    http://www.mediafire.com/?7aobethfdb4

    Responder

  • thecrow

    thecrow

    2007-08-27 14:02

    Hola amigos como bajo estos videos

    Responder

  • inma_22

    inma_22

    2008-04-16 07:59

    El diseño esta genial pero donde esta los pasos que hay q seguir jeje

    Gracias ^^

    Responder

  • mmoya

    mmoya

    2008-04-21 17:38

    Buena

    Responder

  • alan123

    alan123

    2008-06-16 14:10

    puedo Descargar el video?

    Responder

  • arcangel1

    arcangel1

    2008-08-16 15:53

    Muy Bueno pero y una vez que termino como corro la pagina
    gracias.....

    Responder

  • Ryk

    Ryk

    2008-11-09 18:04

    excelente, no hay mas palabras, excelente!

    Responder

↑ Tutorial