Ayuda para diseño web

RobertoP2012 dijo:

Hola a todos! Les cuento, me gusta mucho el diseño web, se html 5 y css 3 hace poco realice el diseño de una web para un script de juegos: Rey del juego (esa web ya no es mia), que les parece? es mi primer diseño y realice 3 ventas después lo termine "liberando". Iba a comprar a un user del foro clases para aprender a hacer plantillas en wordpress desde 0 pero una parte de lo que me contesto fue "No tienes talento como diseñador, por lo tanto no importa el tema que crearas no sera aprobada" no va a el tema pero traten de evitar este tipo de respuesta, porque a nadie le cae bien, quiero aprender mas no que me digan estas cosas o si tiene razón hay otra manera de decir las cosas no hay porque decirlas de esa manera.

Pasando a la razón por que cree este post.. Es porque quiero seguir aprendiendo a crear cosas mas animadas y no se como se hacen, por ejemplo esa plantilla que les mostre lo unico que hice fue editar todo el css y partes de el html para poner barras creadas por mi en photoshop mover de lugar, etc. Así estaba antes AV Arcade

Creo que se puede hacer plantillas en photoshop para luego pasar a html, css y programacion, como se hace esto? hay algún curso?

Algo que siempre quise saber pero no lo se explicar, pongo un ejemplo: Tengo una imagen (16x16) de una estrella y tengo la misma pero pintada, cuando pase el cursor por encima cambie a la pintada con fluidez. Otra cosa también los menús con iconos que al pasar el cursor cambian de color las imagenes y tienen efectos cosas así para salir de lo normal y ir mejorando.

También hacer botones o menus con photoshop que e visto que muchos hacen y poder usarlos en un diseño web.

Muchas gracias a todos los que se tomaron el tiempo de leer el post!

Hacer clic para expandir...

neburor dijo:

jquery son tus plegarias, date una vuelta en todo codecaynon, themeforest

Hacer clic para expandir...

jlchevrolet dijo:

Algo que siempre quise saber pero no lo se explicar, pongo un ejemplo: Tengo una imagen (16x16) de una estrella y tengo la misma pero pintada, cuando pase el cursor por encima cambie a la pintada con fluidez. Otra cosa también los menús con iconos que al pasar el cursor cambian de color las imagenes y tienen efectos cosas así para salir de lo normal y ir mejorando.

Entra a la web donde ves eso ( usa la herramienta webmaster de Google Chrome) te posicionas con el cursor sobre el menu o la estrella "Click derecho/inspeccionar elemento"
Te muestra el HTML y su CSS asociado, con un poco de pasciencia los extraes, y asi por cada web que visites y te guste algo tratas de ver como es el codigo CSS y bueno se aprende mucho de esta manera :encouragement:

Luego los probas ak. Editar y probar HTML, CSS y JavaScript online

EJEMPLO

HTML

<p id="road">
<a href="" title="Web Hosting">Web Hosting</a>
<span>y</span>
<a href="" title="Desarrollo Web">Desarrollo Web</a>
</p>

CSS

element.style {
}
#road { background: rgba(255, 255, 255, 0.1); border: 1px solid #f8f7f8; border-top-color: #e9e8e8; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; margin: 0 auto; padding: 8px; overflow: hidden; width: 756px; }
#road a { background: url(images/sprite_front.png) no-repeat scroll 26px -1738px #E55E48; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; color: #fff; display: inline-block; float: left; font-family: 'Open Sans', sans-serif; font-size: 24px; font-weight: 400; height: 68px; line-height: 68px; padding: 0 42px 0 94px; text-transform: uppercase; text-shadow: 1px 0 2px rgba(0, 0, 0, 0.1); transition: background-color 0.2s ease-out 0s; width: 236px; -moz-transition: background-color 0.2s ease-out 0s; -webkit-moz-transition: background-color 0.2s ease-out 0s; -o-moz-transition: background-color 0.2s ease-out 0s; -ms-moz-transition: background-color 0.2s ease-out 0s; }
#road a:hover { background-color: #454242 }
#road a + span { background: url(images/sprite_front.png) no-repeat 0 -1935px; display: block; float: left; height: 68px; margin: 0 -22px; position: relative; text-indent: -9999px; width: 51px; z-index: 1; }
#road a + span + a { background-color: #5faae3; background-position: 95% -1829px; padding: 0 94px 0 42px; width: 241px; }
a { text-decoration: none; }


Proba esto que te pase y te da como resultado unos botones que al pasar el cursor cambia de color.

Que lastima eso que te dijero, que gente desagradable 😕

Exitos!

Hacer clic para expandir...

chicoloco123 dijo:

Tenés que aprender HTML y CSS, todo lo que mencionaste se hace con simple código CSS y para los efectos -como de transición, por ejemplo- podés usar CSS3. Respecto a las imágenes te recomiendo que leas acerca de los sprites para no sobrecargar al servidor.

Leé mucho, hay demasiada información en la red para todas tus dudas..

Hacer clic para expandir...