Foros del Web » Creando para Internet » HTML »

photoshop y html

Estas en el tema de photoshop y html en el foro de HTML en Foros del Web. Hola me pasaron una imagen en photoshop que tiene un campo para ingresar texto. Lo que no se como hacer es como transformar ese campo ...
  #1 (permalink)  
Antiguo 20/10/2010, 13:29
 
Fecha de Ingreso: agosto-2010
Mensajes: 67
Antigüedad: 7 años, 4 meses
Puntos: 0
photoshop y html

Hola me pasaron una imagen en photoshop que tiene un campo para ingresar texto. Lo que no se como hacer es como transformar ese campo de texto en un input type text para que el usuario ingrese datos. En conclucion debe quedar con el diseño q me pasaron pero apto para que el usuario ingrese datos y puedan ser manipulados.

Gracias!
  #2 (permalink)  
Antiguo 21/10/2010, 03:42
Avatar de Jask  
Fecha de Ingreso: abril-2006
Ubicación: Madrid
Mensajes: 768
Antigüedad: 11 años, 8 meses
Puntos: 15
Respuesta: photoshop y html

Podrías optar por recotar el diseño y dejar ese campo para, en el HTML, incluir el input, manteniendo el diseño. Eso se llama maquetación, te recomiendo que te leas algún artículo :)

Saludos
__________________
Os iusti meditabitur sapientiam
Si te he ayudado, por qué no un poquito de Karma :) ?
  #3 (permalink)  
Antiguo 21/10/2010, 18:16
 
Fecha de Ingreso: febrero-2004
Ubicación: Mediterraneo
Mensajes: 64
Antigüedad: 13 años, 10 meses
Puntos: 2
Respuesta: photoshop y html

Depende como quieras el diseño final, de forma facil puedes utilizar position:absolute de CSS, pero como bien te dice jask es una cuestión de maquetación y hay mucha información en el foro y en la red.
__________________
Tarot, Quiromancia, Astrología, Simbología, Runas...
Tarot Visa

Última edición por almez; 21/10/2010 a las 18:53
  #4 (permalink)  
Antiguo 22/10/2010, 09:00
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 7 años, 1 mes
Puntos: 9
Respuesta: photoshop y html

Zendar, las soluciones que te dan son las correctas, pero te lo voy a poner un poquito más fácil. Digamos que tienes tu imagen y mide 400px de ancho y 500px de alto, y que el campo se encuentra situado 200px a la izquierda y 100px de margen superior dentro de la imagen. La solución para tu problema sería:

El HTML
Código:
<form action="" method="post" name="">
<div id="imagen">
<fieldset>
<input type="text" id="campo" value="" />
<input type="submit" value="Enviar" />
</fieldset>
</div>
</form>

En CSS:
Código:
#imagen
{
     background: transparent url('url-de-la-imagen.jpg') no-repeat top left;
     height: 500px;
     position: relative; /* Importante */
     width: 400px;
}

#campo
{
     left: 200px;
     position: absolute; /* Importante */
     top: 100px;
}

Es muy importante que al div que tenga la imagen como fondo tenga la línea position: relative; y el elemento del formulario tenga position: absolute; Así, podrás decirle en que coordenadas con respecto a la imagen quieres que se ubique.

Espero haberte sido de ayuda,
  #5 (permalink)  
Antiguo 26/10/2010, 17:04
 
Fecha de Ingreso: agosto-2010
Mensajes: 67
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: photoshop y html

Muchisimas gracias a todos! me han sido de mucha ayuda!

Gracias!
  #6 (permalink)  
Antiguo 30/10/2010, 01:33
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Respuesta: photoshop y html

bastara con solo poner al input tu imagen como fondo??

Código CSS:
Ver original
  1. input[type="text"] { background: #color url("tu_imagen.png") no-repeat; }

si, creo que con eso basta,sin ensusiar tanto tu html y tu css, y siendo una muy buena practica para maquetas futuras
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #7 (permalink)  
Antiguo 31/10/2010, 20:17
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 7 años, 1 mes
Puntos: 48
Respuesta: photoshop y html

Cita:
Iniciado por danneg Ver Mensaje
bastara con solo poner al input tu imagen como fondo??

Código CSS:
Ver original
  1. input[type="text"] { background: #color url("tu_imagen.png") no-repeat; }

si, creo que con eso basta,sin ensusiar tanto tu html y tu css, y siendo una muy buena practica para maquetas futuras
No... Una cosa es poner la imagen de fondo en una capa, y luego añadir el input y darle una posición para que quede acorde con la imagen, y otra cosa muy distinta es poner de fondo de los campos input la imagen...

Si hiciese eso que dices, aparecería la imagen en la casilla input al completo, y según entiendo... Él no quiere eso, quiere situar el input a la altura de la imagen dónde aparece el campo dibujado.

Saludos.
  #8 (permalink)  
Antiguo 01/11/2010, 01:01
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Respuesta: photoshop y html

amm... pues para eso existen las unidades de medidas fijas, pixeles

tambien existen los atributos margin y padding, que serian la mejor practica, en lugar de ensuciar el codigo de capas inutiles

si haces un buen uso de estos atributos, el resultado sera como el quiere, el margin para dar espacio entre elementos y el padding para dar altura en el texto, ademas puedes usar width y height para que tu input cresca hasta el tamaño de la imagen
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]

Etiquetas: photoshop
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:27.