¿Es necesario saber diseñar en Photoshop (o similares) para aprender diseño web?

[mjaime9]

¡Hola! Ando interesado en aprender a programar, llevo un par de semanas con HTML y CSS, pero veo que sería importante saber diseñar tus propias imágenes, ¿veis necesario esto? Es que me desmotiva un poco, ya que el tema de Photoshop y tal nunca me ha llamado la atención...

Espero que me podáis sacar de dudas, ya que no sé si cambiar y empezar a aprender otro lenguaje...

Igual es una gilipollez de pregunta x'D, si es así, lo siento.

Un saludo

[engel lex]

no, el diseño web no requiere diseñar tus imagenes

[mjaime9]

¿Pero sería útil?

Un saludo y gracias por responder.

[WHK]

Yo en lo personal lo encuentro 100% necesario saber diseño gráfico para saber hacer un muy buen diseño web.

Puedes utilizar Bootstrap CSS pero de todas maneras necesitarás darle toques agradables a las cabeceras, pie de pagina, etc.

Se puede hacer un sitio web sin saber diseñar? claro que si pero solo sitios básicos tales como:

https://getbootstrap.com/examples/starter-template/
https://themes.getbootstrap.com/collections/all

Pero si sabes diseño puedes hacer cosas como estas:

http://eleonhtml.pelinthemes.com/Eleon/demo/
https://devitems.com/preview/rong/about.html

Para saber que colores usar, crear maquetas, ver la disposición exacta entre logo y vista previa, necesitas saber diseño.

Por otro lado, hasta ahora no he dicho que necesites saber photoshop, solo he dicho que necesitas saber diseñar, yo por ejemplo no uso windows, uso ubuntu y no puedo usar photoshop, pero si uso gimp para hacer todos mis diseños y jamas he tenido complicaciones, de hecho para mi gimp funciona mucho mas rápido y puedes hacer diseños mas grandes con menos recursos de hardware, todo es mucho mas fluido y es gratis, no necesitas tener un status economico bueno o molestar a tus padres por dinero si eres menor de edad para comprar licencias de windows y photoshop de manera anual o hacer cosas ilegales como parchar tus softwares, con gimp te evitas todos esos problemas.

También debes considerar que si aprendes algo en un sistema operativo y luego necesitas usar otro equipo con otro sistema operativo, necesitas algo que sea multiplataforma. por ejemplo evitando los softwares que solo funcionan en windows o en mac a menos que decidas trabajar toda tu vida bajo el mismo sistema. En mi caso en muchas empresas me ha tocado usar windows y mac, en mi casa uso linux, asi que para mi photoshop no es una alternativa.

Saludos.

https://www.gimp.org/
https://inkscape.org/es/
https://www.blender.org/

[mjaime9]

Yo en lo personal lo encuentro 100% necesario saber diseño gráfico para saber hacer un muy buen diseño web.

Puedes utilizar Bootstrap CSS pero de todas maneras necesitarás darle toques agradables a las cabeceras, pie de pagina, etc.

Se puede hacer un sitio web sin saber diseñar? claro que si pero solo sitios básicos tales como:

https://getbootstrap.com/examples/starter-template/
https://themes.getbootstrap.com/collections/all

Pero si sabes diseño puedes hacer cosas como estas:

http://eleonhtml.pelinthemes.com/Eleon/demo/
https://devitems.com/preview/rong/about.html

Para saber que colores usar, crear maquetas, ver la disposición exacta entre logo y vista previa, necesitas saber diseño.

Por otro lado, hasta ahora no he dicho que necesites saber photoshop, solo he dicho que necesitas saber diseñar, yo por ejemplo no uso windows, uso ubuntu y no puedo usar photoshop, pero si uso gimp para hacer todos mis diseños y jamas he tenido complicaciones, de hecho para mi gimp funciona mucho mas rápido y puedes hacer diseños mas grandes con menos recursos de hardware, todo es mucho mas fluido y es gratis, no necesitas tener un status economico bueno o molestar a tus padres por dinero si eres menor de edad para comprar licencias de windows y photoshop de manera anual o hacer cosas ilegales como parchar tus softwares, con gimp te evitas todos esos problemas.

También debes considerar que si aprendes algo en un sistema operativo y luego necesitas usar otro equipo con otro sistema operativo, necesitas algo que sea multiplataforma. por ejemplo evitando los softwares que solo funcionan en windows o en mac a menos que decidas trabajar toda tu vida bajo el mismo sistema. En mi caso en muchas empresas me ha tocado usar windows y mac, en mi casa uso linux, asi que para mi photoshop no es una alternativa.

Saludos.

https://www.gimp.org/
https://inkscape.org/es/
https://www.blender.org/

Muchísimas gracias por contestar. Sí, cuando decía Photoshop (o similares) me refería a GIMP y otros programas de edición... Me tira un poco para atrás esto para aprender desarrollo web

Lo dicho, un saludo y muchas gracias

[mjaime9]

Yo en lo personal lo encuentro 100% necesario saber diseño gráfico para saber hacer un muy buen diseño web.

Puedes utilizar Bootstrap CSS pero de todas maneras necesitarás darle toques agradables a las cabeceras, pie de pagina, etc.

Se puede hacer un sitio web sin saber diseñar? claro que si pero solo sitios básicos tales como:

https://getbootstrap.com/examples/starter-template/
https://themes.getbootstrap.com/collections/all

Pero si sabes diseño puedes hacer cosas como estas:

http://eleonhtml.pelinthemes.com/Eleon/demo/
https://devitems.com/preview/rong/about.html

Para saber que colores usar, crear maquetas, ver la disposición exacta entre logo y vista previa, necesitas saber diseño.

Por otro lado, hasta ahora no he dicho que necesites saber photoshop, solo he dicho que necesitas saber diseñar, yo por ejemplo no uso windows, uso ubuntu y no puedo usar photoshop, pero si uso gimp para hacer todos mis diseños y jamas he tenido complicaciones, de hecho para mi gimp funciona mucho mas rápido y puedes hacer diseños mas grandes con menos recursos de hardware, todo es mucho mas fluido y es gratis, no necesitas tener un status economico bueno o molestar a tus padres por dinero si eres menor de edad para comprar licencias de windows y photoshop de manera anual o hacer cosas ilegales como parchar tus softwares, con gimp te evitas todos esos problemas.

También debes considerar que si aprendes algo en un sistema operativo y luego necesitas usar otro equipo con otro sistema operativo, necesitas algo que sea multiplataforma. por ejemplo evitando los softwares que solo funcionan en windows o en mac a menos que decidas trabajar toda tu vida bajo el mismo sistema. En mi caso en muchas empresas me ha tocado usar windows y mac, en mi casa uso linux, asi que para mi photoshop no es una alternativa.

Saludos.

https://www.gimp.org/
https://inkscape.org/es/
https://www.blender.org/

Una pregunta, que he estado mirando sobre diseño gráfico... ¿Para qué se utilizaría GIMP, Photoshop, etc. en diseño web? O sea, podrías diseñar tus iconos por ejemplo, pero he leído sobre la maquetación. Todo esto se podría hacer sin recurrir a programas de edición fotográfica verdad? Por ejemplo, he estado viendo iconmoon, bootstrap, etc.

Es que no me queda muy claro todos los usos que se le podrían dar a estos programas, sorry por las dudas

Un saludo y gracias de antemano.

[Filibustero de bolsillo]

Fácil. Ve a Themeforest o Templatemonster, selecciona un tema cualquiera, pero uno que te guste. Abre la demo. Imagínalo sin ninguna imagen, ni una sola... ¿Se ve igual? No, un sitio web requiere un tratamiento tan especial para las imágenes cómo para el diseño CSS / HTML.

De hecho, cuando compras esos temas, muchos incluyen placeholders y no las imágenes de stock de las demos, y cuando lo ejecutas en tu servidor te das cuenta que el tema ya no tiene la magia que esperabas...

---

Pero para aclarar tus dudas sobre los programas debemos diferenciar entre dos cosas: Ilustraciones y Fotos. Ambas cosas están relacionadas con la identidad corporativa de un sitio web, o el brand guidelines. Todo eso se supone que lo decides antes de empezar a construir un sitio web.
Algunas marcas optan por usar predominantemente ilustraciones por encima de las fotos, otras deciden ambientarse principalmente alrededor de fotos.

Ejemplo de sitios ambientados en Fotos: https://www.rackspace.com/ https://www.redhat.com/en
Ejemplo de sitios ambientados en Ilustraciones: https://www.google.com/ (básicamente toda la suit) ubiquityhosting.com whitesystem.net

Venga, hablo de elegir una forma general, no de una regla inquebrantable... Ciertamente todas las páginas usan fotos e ilustraciones; pero si te fijas, sí existe una tendencia...

Ambas tienen sus ventajas y desventajas, y ninguna es mejor que la otra; realmente depende de cómo quieres construir tu marca. La ventaja de usar fotos es que puede generar más confianza si usas fotos propias; las fotos en sí cuentan una historia, por lo que puedes ahorrar contenido que de otro modo tendrías que escribir. Las desventajas siendo claras: se requiere de experiencia en fotografía y postproducción... Ilustrar tiene sus ventajas: es barato y fácil de desplegar en gran volumen. Google desarrolla su marca alrededor de iconos, y en sus páginas no suelen haber muchas fotos corporativas...

Ahora, en tu periodo de pre-producción querrás evaluar cómo deseas desarrollar el sitio web: ¿serán ilustraciones o fotos? Ahí es cuando empiezas a escuchar sobre esos programas.

Si te decides por ilustrar, entonces principalmente usarías Adobe Illustrator, para dibujar vectores.
Si te decides por usar fotos, seguramente te moverás mucho con Photoshop y Camera Raw.

Mi opinión es que sí: es 100% necesario saber por lo menos cómo hacer un tratamiento básico de fotos e ilustraciones, sea cual sea el programa que uses.

Sobre iconos, el estándar es usar fuentes y embeberlos cómo clases css, no usar imágenes... Hay muchísimos packs de iconos, los más famosos siendo los de Fontawesome. Pero hay bastantes... Si te decides por usar imágenes, realmente yo no me complicaría y buscaría por http://www.flaticon.com/
Si descargas vectores, sean iconos o ilustraciones, podrás modificarlos con Illustrator...

[mjaime9]

Fácil. Ve a Themeforest o Templatemonster, selecciona un tema cualquiera, pero uno que te guste. Abre la demo. Imagínalo sin ninguna imagen, ni una sola... ¿Se ve igual? No, un sitio web requiere un tratamiento tan especial para las imágenes cómo para el diseño CSS / HTML.

De hecho, cuando compras esos temas, muchos incluyen placeholders y no las imágenes de stock de las demos, y cuando lo ejecutas en tu servidor te das cuenta que el tema ya no tiene la magia que esperabas...

---

Pero para aclarar tus dudas sobre los programas debemos diferenciar entre dos cosas: Ilustraciones y Fotos. Ambas cosas están relacionadas con la identidad corporativa de un sitio web, o el brand guidelines. Todo eso se supone que lo decides antes de empezar a construir un sitio web.
Algunas marcas optan por usar predominantemente ilustraciones por encima de las fotos, otras deciden ambientarse principalmente alrededor de fotos.

Ejemplo de sitios ambientados en Fotos: https://www.rackspace.com/ https://www.redhat.com/en
Ejemplo de sitios ambientados en Ilustraciones: https://www.google.com/ (básicamente toda la suit) ubiquityhosting.com whitesystem.net

Venga, hablo de elegir una forma general, no de una regla inquebrantable... Ciertamente todas las páginas usan fotos e ilustraciones; pero si te fijas, sí existe una tendencia...

Ambas tienen sus ventajas y desventajas, y ninguna es mejor que la otra; realmente depende de cómo quieres construir tu marca. La ventaja de usar fotos es que puede generar más confianza si usas fotos propias; las fotos en sí cuentan una historia, por lo que puedes ahorrar contenido que de otro modo tendrías que escribir. Las desventajas siendo claras: se requiere de experiencia en fotografía y postproducción... Ilustrar tiene sus ventajas: es barato y fácil de desplegar en gran volumen. Google desarrolla su marca alrededor de iconos, y en sus páginas no suelen haber muchas fotos corporativas...

Ahora, en tu periodo de pre-producción querrás evaluar cómo deseas desarrollar el sitio web: ¿serán ilustraciones o fotos? Ahí es cuando empiezas a escuchar sobre esos programas.

Si te decides por ilustrar, entonces principalmente usarías Adobe Illustrator, para dibujar vectores.
Si te decides por usar fotos, seguramente te moverás mucho con Photoshop y Camera Raw.

Mi opinión es que sí: es 100% necesario saber por lo menos cómo hacer un tratamiento básico de fotos e ilustraciones, sea cual sea el programa que uses.

Sobre iconos, el estándar es usar fuentes y embeberlos cómo clases css, no usar imágenes... Hay muchísimos packs de iconos, los más famosos siendo los de Fontawesome. Pero hay bastantes... Si te decides por usar imágenes, realmente yo no me complicaría y buscaría por http://www.flaticon.com/
Si descargas vectores, sean iconos o ilustraciones, podrás modificarlos con Illustrator...

Muchísimas gracias por aclarar. Una última pregunta, sin saber hacer tratamiento de fotos e ilustraciones, sería mejor aprender primero algo sobre Illustrator o Photoshop y después aprender HTML, CSS, javascript...? O se puede aprender primero los lenguajes y después ya ponerme con lo otro...

Un saludo y muchísimas gracias por responder y ayudar

[dato000]

Fácil. Ve a Themeforest o Templatemonster, selecciona un tema cualquiera, pero uno que te guste. Abre la demo. Imagínalo sin ninguna imagen, ni una sola... ¿Se ve igual? No, un sitio web requiere un tratamiento tan especial para las imágenes cómo para el diseño CSS / HTML.

De hecho, cuando compras esos temas, muchos incluyen placeholders y no las imágenes de stock de las demos, y cuando lo ejecutas en tu servidor te das cuenta que el tema ya no tiene la magia que esperabas...om/

mmmmm si, es verdad, hay muchas páginas que te ofrecen maravillas a la vista, con efectos y estilos increibles, pero que pues, cuando llega el momento, y quieres adaptarlo a tus gustos y necesidades, en otras palabras, personalizarlo, te encontraras con un sin fin de inconvenientes que varian en aspectos tan simples como dimensiones de imagenes, o cosas tan raras como incompatibilidades de tu administrador de contenidos con tu plantilla debido a inconsistencias en base de datos, entre otras varias cosas.

Yo personalmente soy un admirador de Diablo Design: http://www.diablodesign.eu

Sus diseños son espectaculares y se adaptan facilmente a Joomla, y con un poco de conocimiento en Photoshop para edición de imagenes e illustrator para lograr vectorizados y resultados más atractivos, se logran cosas increibles, y eso que yo hablo de lo básico, lo que es capaz de hacer un diseñador junior con un tiempo y claridad en los requerimientos, es algo muy bueno, y ni hablar de un verdadero profesional con experiencia en herramientas y tecnicas de diseño, esos son realmente magos.

Digamos que para un desarrollador web no es fundamental aprender herramientas de diseño grafico, pero vaya que es un gran pero gran pero gran avance tener conocimientos en estos programas, llamese Photoshop, Corel, Flash, InDesign, InkScape, Corel, lo que sea, cualquier cosa es buena, así sea aprender Paint, je tengo un amigo que con tiempo y dedicación, hacia posters de calidad para programas de diplomados, para seminarios de una facultad de derecho, y lo hacia con paint!! porque no conocia nada de Photoshop, pero cuando le enseñe, realmente sus tiempos y la calidad de sus trabajos se incremento terriblemente, y eso que el apenas era auxiliar de archivo, ahora, imaginate un verdadero diseñador lo que puede hacer.

[Filibustero de bolsillo]

Muchísimas gracias por aclarar. Una última pregunta, sin saber hacer tratamiento de fotos e ilustraciones, sería mejor aprender primero algo sobre Illustrator o Photoshop y después aprender HTML, CSS, javascript...? O se puede aprender primero los lenguajes y después ya ponerme con lo otro...

Un saludo y muchísimas gracias por responder y ayudar

No, tranquilo. Mira, lo que necesitas aprender de HTML, CSS, javascript, y también de CSMs, trasciende por mucho lo que puedes llegar a necesitar saber sobre Photoshop e Illustrator. Inclusive, si te empiezas a dedicar a la ilustración, verás que la herramienta la dominas en una semana, ahora debes empezar a practicar y dibujar. Mira los speedrun de un artista llamado Jonas de Ro. deben haber varios en YouTube.

No necesitas tener ese nivel xD...

Cómo experiencia personal te puedo decir que mi uso de Photoshop, cuando va orientado al tratamiento de imágenes para sitio web, se limita a recortar fotos, aplicar cambios en Camera Raw, y un uso muy por encima de edición de imagen: corrección de defectos, o coloreado.
Yo llevo en esto aaaaños, y recuerdo cuando usaba Fireworks, hasta era una herramienta popular xD... Hace un par de años Fireworks ya no recibe actualizaciones y Adobe lo ha puesto a dormir. Pensé que no tenía opción, entonces un día tomé la decisión de solo usar Illustrator, y realmente no fue muy difícil... Hay que acostumbrarse a los controles y ya. Aprender a usar la herramienta es fácil: cualquiera puede comprarse un lienzo y los óleos... Lo difícil es dibujar algo bonito xD

Lo bueno es que, nuevamente, no necesitas un conocimiento muy avanzado si no lo deseas. Más vas a necesitar aprender sobre CSS, HTML y javascript que sobre el uso de estas herramientas.

---

No hay mayor enseñanza que la misma experiencia: empieza a crear un sitio web ya, pero no lo hagas a la carrera. Hacer un sitio web es cómo hacer una película; a grandes rasgos se supone que ya sabes cómo va a ser el producto final, por lo que necesitas hacer pre-producción. Planea cuáles colores vas a usar, cuáles fuentes, cuál filosofía de diseño seguirías (¿colores planos?, ¿maquetación en grid, masonry?, ¿qué tan amplias los márgenes de seguridad?) Haz un dibujo en un papel, y trata de seguir tus propias directrices.

Yo abogo absolutamente por la transparencia y el debido uso de derechos de autor, ten mucho cuidado al momento de publicar cualquier foto o ilustración. Pero considero excelente método de práctica la imitación para aprender. Me refiero a: intenta clonar un sitio web que te guste usando exclusivamente los conocimientos que posees. Si te encuentras una foto con alto contraste y a blanco y negro, usa tu ingenio para lograrlo con Photoshop... Si te encuentras con un vector simple, intenta replicarlo en Illustrator... Si tiene un diseño complejo, intenta imitarlo con los grids de Bootstrap, ¡uno puede lograr maravillas! Y créeme, uno aprende bastante así...

(Mira un documental llamado "Todo es un remix", está en YouTube ;P)