Photoshop CS6 Básico para Web

Aprende a utilizar Photoshop para diseñar tu sitio web

Este curso muestra cómo crear el diseño gráfico de tu sitio web. Aclara cuestiones como las dimensiones que debe tener el diseño y por qué. Aunque usted no tenga experiencia previa con Photoshop, el curso lo lleva de la mano y le muestra el uso de capas, estilos, colores, herramientas y tipografía hasta llegar al tema de optimización de imágenes y la preparación de su diseño terminado para utilizarlo en Dreamweaver. No olvide también conocer el curso complementario de Dreamweaver CS6 Intermedio.
Instructor: Alberto Casanova | Duración: 1:48 hrs.
$22
*Si nos visita desde United States of America , compre el curso usando su propia moneda, por sólo 22, incluso por Paypal.

Al adquirir este curso, usted recibirá:

  • Su nombre de usuario y contraseña para que disfrute del curso en línea
  • Descargas de los temas para aprender en su equipo de escritorio, laptop o tableta sin estar conectado a internet
  • Descarga de los ejercicios y archivos necesarios para seguir el curso
  • Asesorías por correo electrónico durante 30 días
  • Un acceso al curso sin caducidad

¿Cuándo pagar con Paypal?
¿Cuándo pagar con DineroMail?
¿Cuándo pagar con Western Union?
¿Compró el paquete de cursos y no puede descargar los videos? No se preocupe: envíe un mensaje a soporte@aprenderapido.com para ayudarle lo más pronto posible.
Temas gratisRequerimientos
TemaDuraciónArchivos
Duración total1hr 48min
Tema 01: Consideraciones previas
03m 09s
Tema 02: preparando Photoshop para trabajar
02m 21s
Tema 03: creando el archivo en Photoshop
03m 07s
Tema 04: entendiendo el comportamiento de las capas
06m 08s
Tema 05: creación de guías
05m 33s
Tema 06: estilos de capas
09m 32s
Tema 07: diseñando el encabezado
07m 06s
Tema 08: diseñando los botones de navegación
11m 28s
Tema 09: preparando el área de portada
07m 58s
Tema 10: preparando el área de portada - parte 2
05m 24s
Tema 11: preparando el área de contenido
07m 31s
Tema 12: cortando el diseño y creando sectores
08m 31s
Tema 13: formatos y optimización de imágenes
13m 05s
Tema 14: optimizando y exportando sectores
09m 07s
Tema 15: cortando las imágenes para los encabezados de área
03m 48s
Tema 16: cortando las imágenes para la galería Slidorion
03m 08s

Para seguir este curso es necesario contar con la versión CS5 ó CS6 de Photoshop. Si no cuenta con ninguna de ellas, puede descargar una versión de prueba dando clic aquí.

Comentarios (136)

  • Belen

    |

    hola alberto, quise hacer una linea en photoshop pero me aparece un cartel que dice “No se ha podido usar la herramienta rectángulo porque el área afectada esta vacía o no se solapa con el lienzo”. que tengo que hacer para poder realizarlo? gracias, saludos!

    Responder

  • diego penado

    |

    Muy buenos dias Alberto, quiero comentarle que los archivos adjuntos a los videos no se pueden descargar debido a un error.

    Apesar de haber comprado el curso hace ya un año, quiero reiterarle que es exelente, que lo felicito y que lo invito a que siga adelante en la produccion de los mismos.

    Un saludo muy cordial.

    Responder

  • juan jése delgado

    |

    Si el curso de Photoshop CS6 Básico para Web es tan buena la explicación como el curso gratuito de dw-básico, quiero hacerme con el curso, sólo hay un problema, no me fió de los medios de pago. Pregunta: ¿puedo hacer una transferencia a una cuanta del importe del curso?

    Responder

    • Alberto

      |

      Hola Juan, ya va para 3 años y en ninguna ocasión he tenido dificultades con mis clientes respecto a un pago. Paypal es tan confiable como una transferencia. Aún así le enviaré un número de cuenta a su correo. Saludos!

      Responder

  • Luis Montes

    |

    Estimado Alberto ¿puedes diseñar un app? De ser afirmativo ¿cual es el costo? Es para un proyecto que estamos cotizando. Muchas gracias

    Responder

    • Alberto

      |

      Hola Luis, depende de la funcionalidad de la aplicación (sólo desarrollo para dispositivos Apple). Coménteme con más detalle a mi correo por favor. Saludos.

      Responder

  • Luis Montes

    |

    Buenas tardes maestro, me piden que haga un diseño pero para celular ¿de que tamaño se debe hacer el formato? Gracias y saludos

    Responder

    • Alberto

      |

      Hola Luis. Si me pregunta por las dimensiones gráficas para celular, puedo decirle que no hay una respuesta precisa. Hay un método, “responsive design” (diseño responsivo), basado en reglas CSS que entran en función dependiendo de las dimensiones de la pantalla. Por lo tanto, usted puede crear un sitio para pantallas grandes (como las de los equipos de escritorio) y el mismo sitio, al visualizarse en una pantalla pequeña, como las de una tableta o celular, automáticamente se ajusta. El definir una dimensión para celular es virtualmente imposible, debido a la inmensa variedad de dimensiones y orientaciones (es decir, vertical u horizontal). Le mando un saludo.

      Responder

  • jordi

    |

    hola alberto,

    No hay el photoshop “intermedio” y “avanzado”

    Estoy muy interesado,

    Gracias

    Responder

    • Alberto

      |

      Hola Jordi, todavía no. Hay algún tema en especial que le interese aprender respecto a Photoshop?

      Responder

      • jordi

        |

        Simplemente me gustaria saber hacer buenos diseños para web o ilustraciones

        Responder

        • Alberto

          |

          El curso básico de Photoshop para web lo ayudará a iniciarse con el diseño para web. Después de conocer la herramienta todo lo demás es cuestión de práctica y práctica con un poco de práctica ;).

          Responder

  • Camilo Garcia

    |

    Buenas tarde Alberto, tengo un problema en el tema 5 del curso básico cs6 de photoshop para web, en el minuto 4:06 para darle el color a la selección que hacemos, mencionas que debemos utilizar la combinación ALT RETROCESO pero no encuentro la forma de hacerlo y utilizo un mac, te agradezco por la colaboración. que buenos cursos!

    Responder

    • Alberto

      |

      Hola Camilo, puede usar la función FILL o Relleno dentro del menú “Edición”. Está disponible también con las teclas Shift-F5. Saludos.

      Responder

  • luis mendez

    |

    buenos dia señor alberto ante todo un cordial saludo … soy fiel fanatico a sus cursos de diseño web … hasta los momentos sigo el curso de photoshop cs6 basico para la web y dreamweaver…. pude realizar el diseño de la pagina web de arqo aquitectos al pie de la letra…. pero tengo una duda valide la pagina web de arqo arquitectos que usted tiene on line en W3C que es organizacion de validacion de sitios web … pude ver que el sitio de arqo arquitectos contiene 47 errores en lineas de codigo … si quiere compruebe y valide usted mismo el sitio de arqo arquitectos…. en tal caso como hariamos para corregir eso errores para que sitio quede totalmente valido… y si puede hacer un video al respecto… gracias

    Responder

    • Alberto

      |

      Hola Luis. La mayoría de las advertencias son por la falta del parámetro ALT en las imágenes. Es sólo cuestión de dar clic en la advertencia y la vista de código lo llevará la línea con el parámetro faltante. Dentro de la etiqueta IMG agrege el parámetro ALT para que quede así: ALT=”botón del menú principal” o una descripción para la imagen en cuestión. Cabe señalar que esto no afecta de ninguna forma la funcionalidad del sitio. Hay otras indicaciones en el validador pero hacen referencia al código que Dreamweaver genera para el cambio de imágenes del menú al pasarle el mouse por encima y esto no lo debería modificar. Reitero que ninguna de las advertencias afectan el funcionamiento del sitio. Quedo a sus órdenes.

      Responder

  • Guillermo

    |

    Hola Alberto
    Primero deja darte mis felicitaciones por tus videos muy bien explicados, yo soy de Chile y quiero obtener los cursos de PS y Dreamweaver Cs6
    solo tengo que pagar y después enviar un mail con el archivo…

    saludos cordiales

    Responder

    • Alberto

      |

      Hola Guillermo. Si usted paga por Paypal el acceso es automático. Si usa Western Union, sólo envíeme el recibo a pagos@aprenderapido.com para validarle su acceso a los cursos que adquiera. Saludos.

      Responder

  • Richard José

    |

    Hola, Muy buenos sus cursos! Una pregunta que no viene al caso pero tengo curiosidad. ¿De que país son ustedes?

    Responder

    • Alberto

      |

      México.

      Responder

  • Alex Reyes

    |

    ALBERTO COMO ESTAS MIRA MUY BUENOS VIDEOS Y MUY BIEN EXPLICADOS QUISIERA SABER SI NO TIENES UN CURSO DE PHOTOSHOP PARA LA GENTE QUE QUIERA INICIAR EN ESTE MUNDO ADEMAS UNA PREGUNTA COMO ASER ESE RESPLANDOR QUE TIENES EN EL ANUNCIO DE FLASH ESTA MUY BIEN ME GUST Y QUIERO APRENDER COMO HACERLO

    Responder

  • J. Francisco Fernández Saura

    |

    Hola Alberto, ante todo felicitarte por tu excelente curso, así como la calidad de tus vídeos. Mi consulta esta relacionada con la optimización de imágenes. Como dices en el video al respecto, el formato png y gif son los que se utilizan cuando tenemos una imagen con trasparencias, ¿es también esto válido cuando esa trasparencia es parcial. como la que creamos modificando la opacidad en PS? ¿son capaces estos formatos de reflejarla?

    Responder

    • Alberto

      |

      Hola Francisco, sólo el formato PNG soporta transparencias de cualquier tipo, parciales o totales. El formato GIF sólo soporta transparencia totales. Saludos.

      Responder

  • Rafael Abalos

    |

    Hola Alberto. En el tema 8, diseñando el area de navegación, tengo que alinear la flecha con el botón. Pero cuando le doy a alinear siempre me alinea el botón y no la flecha. He probado seleccionado primero la flecha y despues presionando la tecla control el botón y al reves. Pero siempre me alinea el botón y la flecha me la deja en el mismo lugar. Esta función de alinear es muy interesante, pero como debo hacer para indicar cual es el que me tiene que alinear con respecto al otro objeto.

    Saludos y gracias.

    Responder

    • Alberto

      |

      Hola Rafael, cuando alinie dos objetos como en este caso, asegúrese de que la flecha esté completamente sobre el botón y que NO estén separados uno del otro. Si están separados, Photoshop moverá los dos objetos para que coincidan. Si están juntos, uno sobre otro, Photoshop moverá sólo el objeto que no está en la posición correcta. No es relevante el orden en que seleccione las capas, sólo la posición de una respecto a las demás. Saludos.

      Responder

  • Adrián Márquez

    |

    Amigo Albero…Nose Q te parezca mi idea… Q a quien te compre tus cursos seria bueno hacerles un certificado de fin de cursos que tenga validez Oficial y sirva para curriculum, como si fuera una escuela en linea, obvio quien quiera el certificado tiene que pagar el envío y tu hacerlo llegar a casa de cada usuario Con Logo , sello y firma,(imagínate un certificado diseñado por ti en algún papel de buena calidad y que tenga validez) darle más seriedad’ seria formidable para presentarlo en el área laboral. Crees que seria posible? ¡Muchas gracias y saludos!

    Responder

    • Alberto

      |

      Hola Adrián. El asunto de la validez oficial es un tanto complicado. Aún así, el certificado que envío es de alta calidad y usted puede imprimirlo en papel de alta calidad. He visto certificados de escuelaes “oficiales” que está terriblemente mal hechos e impresos en una hoja de papel común y corriente. Créame que el certificado que envío es muchísimo mejor y con una imagen institucional. Depende de cada quién en cuanto a la calidad de impresión. Saludos.

      Responder

  • Carlos Claro

    |

    ALBERTO DISCULPA LA PREGUNTA, CON RESPECTO A LOS PAQUETES QUE TE COMPRE, EL PHOTOSHOP PARA WEB ES DIFERENTE AL PHOTOSHOP TRADICIONAL PARA TRABAJAR IMAGENES?

    Responder

    • Alberto

      |

      Hola Carlos. Éste curso en particular está enfocado en el diseño de una interfaz para una página, pero la información es lo suficientemente general para que sea aplicable a cualquier otro tipo de proyecto. Saludos y sigo a tus órdenes.

      Responder

  • juan quiroz

    |

    Buenas noches Alberto estoy teniendo problemas para visualizar los temas del 6 en adelante, ojala pudieras hecharles un ojo, GRACIAS!!!!

    Responder

    • Alberto

      |

      Hola Juan, muchas gracias por su reporte. Estoy probando el video en línea y las descargas de los temas del curso pero todo funciona con normalidad. ¿Qué es exactamente lo que ocurre en su caso? Saludos y quedo al pendiente.

      Responder

  • Carlo García

    |

    Disculpa, ¿Por qué cuando me cambio de ventana el vídeo se traba y deja de correr?, también cuando quiero ajustar los botones con guías inteligentes lo que se mueve es la barra de desplazamiento ¿Cómo puedo solucionarlo?.

    Responder

    • Alberto

      |

      Hola Carlo, el asunto del video que se corta probablemente sea debido a algún detalle en su navegador o en la conexión. Pruebe usando otro navegador u otro equipo. Disculpe, no comprendo la última pregunta respecto a los botones y guías inteligentes. Podría formulármela de otra manera? Saludos.

      Responder

      • Carlo García

        |

        Gracias. Observe bien como se debía hacer, ahora ya esta resuelto.

        Responder

  • alberto villabona

    |

    Alberto: Gracias ya logre descargar los de photpshop. Alberto, Colombia.

    Responder

    • Alberto

      |

      Tocayo, me alegra. Cualquier cosa relacionada con el servicio, sigo a tus órdenes. Saludos.

      Responder

  • Rene Brevis

    |

    Estimado Alberto, hace unos días comencé mi curso de PS para web y la verdad es que estoy súper contento y satisfecho con esta compra. Quisiera saber si tienes pensado subir más cursos para poder ir perfeccionando lo aprendido ya que me he quedado “con gusto a poco”.
    Te felicito por la calidad y sencillez con la que están hechas las clases.

    Espero que pronto puedas ir subiendo más cosas para seguir aprendiendo.

    Saludos desde Chile!

    Responder

    • Alberto

      |

      Hola René. Aprecio muchísimo que me haya dado su punto de vista y le haya sido de provecho el gran esfuerzo y cariño que invertí en producirlos. Ya están disponibles un par de temas del curso de Dreamweaver Avanzado: el de introducción y el tema 1. Espero que despierten su interés y más delante nos acompañe en el resto del curso. Saludos y, de nuevo, gracias.

      Responder

  • Gabriel Zambrano

    |

    Buenas tardes Alberto,

    En el tema 9 de photoshop, preparando el área de portada, ejecutando lo que dice en el minuto 3:14 aprox., “con la herramienta de rectángulo y usando pixeles en las opciones, voy a rellenar el rectángulo que acabo de crear usando las guías”, en ese momento me da un error que dice “No se ha podido usar la herramienta rectángulo porque el área afectada esta vacía o no se solapa con el lienzo”.

    Atento a tu respuesta
    Saludos y gracias

    Responder

    • Alberto

      |

      Gabriel, le he respondido a su cuenta de correo. Saludos.

      Responder

      • Gabriel Zambrano

        |

        Alberto, muchas gracias por tu explicación, has resuelto mi duda y ya puedo continuar con el curso.
        Saludos

        Responder

        • Alberto

          |

          Me alegra, Grabriel. Saludos.

          Responder

  • Sergio

    |

    Buenos dias Alberto, muy bueno tu curso de Dreamweaver, por favor respondeme esto: que programa es mas practico para hacer paginas web? Adobe Flash o Dreamweaber, y practico en el sentido de que me pueda concentrar mas en el diseño que en las cuestiones del script y otras cuestiones tecnicas.

    hasta luego

    Responder

    • Alberto

      |

      Hola Sergio. Flash es una herramienta y no se debería de usar como una plataforma. Dreamweaver es la herramienta que nos ayuda a armar un sitio web completo y nos permite incluir presentaciones, anuncios o aplicaciones de Flash en el mismo. Los sitios hechos usando sólo Flash suelen ser malos y/o imprácticos, a menos que sean desarrollados por una persona o equipo 100% profesional. Recuerde: Flash es un *complemento* para su sitio y como tal funciona excelentemente bien, pero no debe de usarse de forma exclusiva. Espero haberle sacado de dudas. Saludos.

      Responder

  • benjamin

    |

    My Error fue enamorarme del curso Básico sin saber que había que pagar las lecciones del curso intermedio en Photoshop, estaba tan ilusionado con que el curso intermedio que era gratis que pensé que los otros también pero yo no puedo pagar las lecciones del curso Y gracias por todos los vídeos me Ayudaron mucho Gracias 😀

    Responder

  • Josue Campos

    |

    Tengo varias consultas, quiero saber
    -¿cual es el total si quiero recibir los cursos de dreamwever y photoshop?
    -¿Cuanto dura cada curso?
    -Dan algún certificado al final?
    Bueno espero aun impartan esos curso, espero su respuesta.

    Responder

    • Alberto

      |

      Hola Josué. El costo total por los dos cursos es de $42 dólares (o el equivalente en tu moneda nacional, unos $360 colones según puedo ver aquí). El curso de DW Intermedio dura 4 horas y media. El de Photoshop dura casi 2 horas. Incluyen las descargas de los videos y los ejercicios, por si deseas aprender aunque no tengas conexión a internet. No ofrezco certificado al final todavía y el curso sigue disponible. Si deseas más información, estoy a tus órdenes. Saludos.

      Responder

  • Alex

    |

    Hola de nuevo tambien estoy interesado en el Adobe Cs6 completo pero para Mac aun no me descargado los que tu tienes pero quisiera saber esto…para Mac sirven los que tu dejas en el link de descarga

    Responder

    • Rene Brevis

      |

      Alex, yo estoy trabajando estos cursos desde un mac air y todo funciona igual (los comandos son los mismos).

      Saludos

      Responder

  • Luis Montes

    |

    Buenos días maestro. Seguí cuidadosamente la explicación de la creación de la barra de menús y todo excelente. Excepto por la regla 14, “normal derecha” : la imagen para esea opción no aparece cuando le doy vista previa en firefox. Muchas gracias nuevamente por tu valiosa ayuda

    Responder

    • Alberto

      |

      Hola Luis. Por favor expóngame más detalladamente el problema. Si gusta, puede mandarme una copia de su diseño a soporte@aprenderapido.com con la descripción del problema en el mensaje para poder diagnosticar mejor el asunto. Saludos.

      Responder

  • Axel

    |

    Buenas tardes Alberto,

    tengo una duda.
    Estoy haciendo un encabezado para mi web. Se compone de dos partes. En la izquierda el logo y un vector, y a la derecha una imagen de una persona con el lema de la empresa.

    al ser el encabezado, la imagen de la derecha debe ser bastante pequeña ( 152x158pixeles). El problema es que haga lo que haga, no hay manera de conseguir tener la imagen con buena calidad a ese tamaño. He intentado de optimizar, reducir el tamaño, etc, pero se pixela muchísimo

    No entiendo como en muchas pagina web consiguen tener una imagen de calidad a tamaño muy reducido en el encabezado o donde sea.

    espero que me puedas resolver esta duda
    gracias

    Responder

    • Alberto

      |

      Axel. Para resolver el problema tenemos primero que diferenciar entre el concepto de ‘dimension’ y el de ‘tamaño’ (cuando nos referimos a tamaño de archivo). ‘Dimension’ es lo que mide la imagen visualmente hablando. Una imagen con una **dimension** de 152 x 158 pixeles se va a pixelar si intenta estirarla para llenar un espacio más grande que la dimensión de la imagen. Si usted desea cubrir un espacio de 500 x 500 pixeles con una imagen de 150 x 150 px, seguramente tendrá un resultado de baja calidad, sobre todo si la imagen es alguna foto o ilustración.

      En contraste, con ‘tamaño’ nos referimos a lo que pesa el archivo resultante después de guardar la imagen en nuestro editor (Photoshop). Aquí es donde sí podemos reducir el ‘tamaño’ (** no la dimensión **) para ahorrar espacio y que el usuario pueda descargarlo más rápido. En el tema 13 de este curso se experimenta con la cantidad (0% > 100%) y tipo (jpg, gif, png) de compresión en la imagen para obtener un resultado optimo en cuanto a ‘tamaño’ de archivo se refiere. NUNCA se modifica la ‘dimension’ de la imagen para lograr este propósito.

      No escatime nunca en la ‘dimension’ para obtener un buen tamaño de archivo. Optimice el ‘tamaño’ para lograrlo.

      Se lo ilustro de otra forma: suponga que en su casa tiene 20 invitados imprevistos a cenar pero no tiene suficiente presupuesto. Por alguna extraña razón todos deciden que desean cenar pizza. Como usted no tiene dinero para invitar a cenar a todos, tiene dos opciones: 1) comprar 1 pizza de las más costosas pero que sólo será suficiente para que a cada uno de los 20 invitados obtenga un pequeño trocito (reducir las ‘dimensiones’ de los *trozos* de pizza). La opción 2) es comprar 10 pizzas de las más baratas pero que serán suficientes para saciar el hambre de todos (reducir el ‘tamaño’ del *precio* de la pizza).

      Siempre experimente con la calidad de la imagen, nunca con las dimensiones de ésta.

      Responder

      • Axel

        |

        Gracias Alberto…

        en realidad me refería a lo contrario. Tengo una imagen de 2000x 2000pixeles ( p.ejemplo) y quiero reducir su tamaño sin perder la calidad a 150×150 para tener una miniatura en la cabecera.
        Pero al bajarle tanto tamaño, pierdo muchísima calidad

        muchas gracias

        Responder

Deja un comentario