Aprendiendo Photoshop solo para diseño web


17

Quiero convertirme en diseñador web, así que estoy viendo muchos tutoriales en video de Photoshop, pero algunos de esos tutoriales no son útiles para el diseño web. Por ejemplo, algunas películas tratan sobre la piel, los dientes, dibujar una flor o cambiar el patrón de una pared o cosas como esta. ¡Porque no tengo ningún recurso específico para el diseño web, y esos tutoriales son una especie de pérdida de tiempo para mí!

¿Conoces alguna fuente de tutoriales para ayudarme a aprender diseño web en Photoshop?

¿Qué debo hacer para centrarme en el diseño web en Photoshop?

¿Qué partes de Photoshop son necesarias para el diseño web y cuáles no?

Respuestas:


15

Cada herramienta, pincel, filtro y efecto en Photoshop tiene su propio propósito en el mundo. No existe un simple "aprender bien esta herramienta y usarla para todo" porque se usan diferentes herramientas, etc. para diferentes efectos.

Por ejemplo, si le gustan los botones brillantes ligeramente brillantes en su página (estos eran muy populares hace un tiempo), necesitaría usar algo de sombra, varios degradados, enmascaramiento y tal vez un poco de movimiento manual con una herramienta de pincel. Para un fondo, puede usar un color sólido o degradado con una máscara texturizada / estampada.

Dado que no hay "una parte de Photoshop" que aprender, lo mejor que puede hacer es estar bien equilibrado utilizando las diversas herramientas. Explore y mire todas las variedades de sitios. Tome nota de las características que le gustan y luego intente recrearlas usted mismo. A menudo, puede diseccionar los elementos (¿tiene el objeto bordes, gradientes, texturas, fuentes de luz, etc.?) Y recrear algo similar.

Al mismo tiempo, no puedo trabajar en casa lo suficiente como para que haya más que diseñar que solo Photoshop. Mi recomendación sería tomar una clase de diseño en el colegio comunitario local (o donde sea) y tener una idea de cosas como el equilibrio, los colores, los espacios en blanco, etc. Estos conceptos a menudo marcan la diferencia entre parecer profesional y parecer la tía de alguien ( quién, en este escenario, no es diseñador de oficio ) editó una plantilla de Geocities.


44
"... hay más para diseñar que solo Photoshop". ¡Escucha Escucha! +1.
Philip Regan

1
Photoshop tiene una grave falta de algunas características de las que se beneficiaría el diseño de un diseño ... junto con muchas herramientas vectoriales. Podría cambiar a ilustrador y usar Photoshop para otros gráficos especializados. Como personajes, íconos fotorrealistas ...
Muhammad Umer

17

"Quiero convertirme en diseñador web, así que estoy viendo muchos tutoriales en video de Photoshop"

¿Conoces HTML, CSS y JS? Si no, comience allí primero.

Luego, Photoshop se usa como herramienta para crear los gráficos que combinan con HTML, CSS y JS.

No hay nada particular centrado en el 'diseño de sitios web' sobre herramientas particulares en PhotoShop. Es simplemente una herramienta de creación y edición de imágenes.


4

Para diseñar sitios web, también debe mirar otras maquetas. Considere algunos de los efectos que podría usar, como peelings de página, enlaces de barra de navegación. Mucho de esto no es difícil de hacer en Photoshop, pero requerirá un poco de Google. A menudo reviso Dribbble, que es una maravillosa comunidad de diseño. Es muy popular, por lo que seguramente verá muchas técnicas nuevas que los diseñadores web están implementando.

Pero para obtener una visión general, intente trabajar con un conjunto de tutoriales específicamente utilizados para diseñar sitios web. Incluso tutoriales realmente básicos. Porque estos delinearán los pasos para usted y puede replicarlos en proyectos futuros. Agregué 2 recursos realmente excelentes a continuación, espero que los revisen. Te garantizo que encontrarás un tutorial de plantilla para principiantes que te guste, ¡y aprenderás mucho!


4

Si desea diseñar sitios web, sería mucho mejor trabajar con Fireworks que Photoshop. PS es, en el fondo, una aplicación de manipulación de fotos, y si bien sus herramientas se pueden usar para estructuras alámbricas, no son especialmente eficientes. Dicho de otra manera: usar PS para diseño web es como usar PS como una aplicación DTP sobre InDesign. Sí, se puede hacer, pero no es una excelente manera de hacerlo, y perderá a largo plazo.

Las ventajas que trae Fireworks son:

  • mucho más fácil trabajar con formas vectoriales verdaderas
  • MUCHO más fácil definir dimensiones de píxeles; sin desenfoque de trazos en el estiramiento, etc.
  • puede definir 'páginas maestras' para realizar cambios de diseño en todo el sitio en sus maquetas, sin tener que rehacer cada imagen
  • Es más fácil crear una biblioteca de controles de interfaz de usuario de uso común (valioso para diseñar aplicaciones web)
  • Interfaz de usuario más cercana a la interfaz de aplicación de escritorio típica, lo que significa una curva de aprendizaje más superficial

Las únicas ventajas reales que Photoshop aporta a la mesa son el hecho de que

  • la representación de la fuente es mejor
  • sus colegas conocerán la aplicación un poco mejor

1
Sí, Fireworks es mejor; de lo contrario, debe usar Illustrator y Photoshop y alternar entre ellos.
Cakey

0

En la nota de "hay más para diseñar que Photoshop": Encontré esto perspicaz: http://naldzgraphics.net/tips/what-designers-need-to-know-about-typography/


Sufre de prosa forzada y ocasionales errores gramaticales. Puedo resumirlo (y mejorarlo) en un cuadro de comentarios: use el buen gusto en todas las cosas, y mire hacia arriba y aclare las siguientes palabras: fuente vs. tipografía , serif vs. sans serif, kerning, tracking, espaciado , guía, alineación, rubor, justificado. El artículo no proporciona definiciones claras o completas para la mayoría de estos; Las explicaciones son superficiales y parecen de segunda mano.
Comodín el

También es un enlace de solo respuesta.
Comodín el

0

Photoshop es solo una herramienta y cuanto mejor conozca la herramienta, mejor podrá usarla para hacer lo que quiere hacer. Sin embargo, hay más para diseñar que solo conocer Photoshop.

Esta mentalidad de que solo necesitas aprender Photoshop y luego ser un diseñador es lo mismo que llamarte constructor porque sabes cómo usar un martillo, o un mecánico porque puedes usar una llave inglesa. El diseño como tal hace que las cosas funcionen bien (y probablemente se vean bien en el proceso), tiene muy poco que ver con conocer Photoshop / Illustrator / InDesign / Sketch / lo que sea, pero cómo usas esas herramientas para cumplir tus ideas.

Hay toneladas de malos tutoriales en YouTube y toneladas de buenos también. Aprenda a hacerlo todo, las técnicas serán valiosas en el futuro de todos modos. Creative Block también tiene buenos tutoriales. Pero, además, analice la teoría del color, la teoría del diseño, la tifografía (Eric Spiekerman's Stop Stealing Sheep & Find Out How Type Works es una muy buena introducción) y otras habilidades de diseño gráfico más tradicionales son habilidades mucho más valiosas para invertir su tiempo que solo aprender Photoshop

Además, como alguien mencionó anteriormente, aprender HTML / CSS / JS es una ventaja definitiva para el trabajo de diseño web también.


-2

Puede validar su archivo PSD para problemas conocidos de compatibilidad web aquí https://www.oss-usa.com/web-preflight?promo=web-preflight es gratis


Hola Nik, bienvenido a GDSE y gracias por tu respuesta. No veo cómo esto responde las preguntas, ¿podría explicarlo? ¡Gracias!
Vincent

Tengo experiencia en desarrollo web y conocí a muchos principiantes en diseño web. Hay errores comunes que cualquiera puede hacer. Por ejemplo, píxeles decimales en tamaños de fuente. Este servicio puede ayudar a los novatos.
Nik

Gracias. Sin embargo, sería realmente útil si desea compartir su experiencia y explicar esos errores. De esa manera, su respuesta seguirá teniendo (¡mucho!) Valor en caso de que el enlace se rompa más adelante. La podredumbre del enlace es la razón por la que no estamos muy interesados ​​en (en su mayoría) las respuestas solo de enlace, y la razón por la que rechacé su respuesta. No se desanime, por favor, sabemos que usar este sitio puede ser una curva de aprendizaje. Nosotros estamos contentos de tenerlo, seguir contribuyendo!
Vincent
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.