Retroceder   Foros del Web > Diseño de Sitios web > Diseño Gráfico

Respuesta
 
Herramientas Desplegado
Antiguo 03-mar-2008, 14:30   #1 (permalink)
Kinopio no se puede cailificar en este momento
 
Fecha de Ingreso: diciembre-2007
Ubicación: Frente al ordenador...
Mensajes: 93
Enviar un mensaje por MSN a Kinopio
Imagen sobresaliente...

Hola maestros, quisiera saber si me pudieran explicar, como se hace el efecto en las páginas de html...usando claro está css...para hacer que una imagen insertada sobresalga de un margen...pero sin afectar al texto que la acompaña...

www.templatehelp.com/preset/pr_preview.php?i=18658&pr_code=5w52z65746tCIw3sN4W WbbV0g8194M

Gracias...
__________________
----------------------------------------------------------
Algunas cosas simplemente son bellas...por que uno no puede tenerlas...
Kinopio está desconectado   Responder Citando
Antiguo 03-mar-2008, 15:30   #2 (permalink)
hades87 tiene algunos puntos positivos de karma
 
Avatar de hades87
 
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 1.371
Enviar un mensaje por MSN a hades87
Re: Imagen sobresaliente...

diria qeu ese efeto de sobresalir es parte del photoshop.
__________________
Desarrollador web por amor al arte
hades87 está desconectado   Responder Citando
Antiguo 03-mar-2008, 18:47   #3 (permalink)
cleft ha deshabilitado el karma
 
Fecha de Ingreso: febrero-2008
Mensajes: 62
Re: Imagen sobresaliente...

Igualmente pienso que es un grafico que contiene el fondo y la foto de la mujer.
Para lo anterior, usando CSS: seria de definir dicha imagen como background del elemento (una capa preferiblemente).

Ahora, si se quiere ir a mas extremos, en mi opinion podria hacer de la siguiente forma:
Creas una capa con solo el background (sin la foto de la chica).
Luego, con posicionamiento absoluto, colocar la imagen de la chica (seria en formato PNG preferiblemente), con lo cual, te permitira rotar varias fotografias (digamos, otra chica, un hombre, etc) nada mas cargando imagenes PNG en cada pagina que visites.

Bueno, creo que no me estoy explicando muy bien, pero te dejo un articulo donde hablan sobre el "Uso Creativo de transparencia PNG"
http://www.digital-web.com/articles/...reativity_png/

Revisa la parte de ABC News.
cleft está desconectado   Responder Citando
Antiguo 03-mar-2008, 21:56   #4 (permalink)
Kinopio no se puede cailificar en este momento
 
Fecha de Ingreso: diciembre-2007
Ubicación: Frente al ordenador...
Mensajes: 93
Enviar un mensaje por MSN a Kinopio
Re: Imagen sobresaliente...

Ea... gracias por responder...ahora bien, ese efecto de photoshop, saben donde lo puedo encontrar, o tutoriales de este...
gracias...
__________________
----------------------------------------------------------
Algunas cosas simplemente son bellas...por que uno no puede tenerlas...
Kinopio está desconectado   Responder Citando
Antiguo 04-mar-2008, 03:34   #5 (permalink)
hades87 tiene algunos puntos positivos de karma
 
Avatar de hades87
 
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 1.371
Enviar un mensaje por MSN a hades87
Re: Imagen sobresaliente...

bueno con photoshop es hacer un rectángulo, ahí metes como el banner, dejar un borde del mismo color y la imagen de la chica que sobresalga, si eso pregunta mejor en el foro de diseño gráfico o investiga por ahí
__________________
Desarrollador web por amor al arte
hades87 está desconectado   Responder Citando
Antiguo 04-mar-2008, 08:56   #6 (permalink)
Moderata
JavierB es realmente agradableJavierB es realmente agradableJavierB es realmente agradableJavierB es realmente agradableJavierB es realmente agradableJavierB es realmente agradable
 
Avatar de JavierB
 
Fecha de Ingreso: noviembre-2002
Ubicación: Madrid
Mensajes: 19.552
Re: Imagen sobresaliente...

Movido al foro de Diseño Gráfico desde Css.

Saludos,
__________________
Lee las Políticas de los foros y escribe correctamente.
JavierB está desconectado   Responder Citando
Antiguo 04-mar-2008, 12:24   #7 (permalink)
Roggers tiene algunos puntos positivos de karma
 
Avatar de Roggers
 
Fecha de Ingreso: septiembre-2006
Ubicación: Lima - Perú
Mensajes: 130
Enviar un mensaje por MSN a Roggers
Re: Imagen sobresaliente...

Creas una Capa de color verde como en la imagen de ejemplo para el fondo

Luego ubicas otra capa rectangular mas pequeña ... tambien como el del ejemplo

Y por ultimo Ubicas la imagen de la chica ... claro contorneando la figura...

Y queda listo...

Solo es cuestión de ubicar bien las capas...

Pdta. Puedes dar el mismo color verde al fondo de tu pagina ... y de esta manera queda mejor el efecto que buscas...

Chausito
__________________
Forosdelweb.com & Foro-Creativo.com

mis dos casas virtuales...
Roggers está desconectado   Responder Citando
Antiguo 05-mar-2008, 10:41   #8 (permalink)
LORIAN ha deshabilitado el karma
 
Fecha de Ingreso: noviembre-2005
Mensajes: 28
Re: Imagen sobresaliente...

Al hacer la composicion en photoshop has de cuidar que te quede en el mismo lugar para despues al particionar la imagen y maquetes con css quede exactamente en su sitio y de el efecto sobresaliente

Última edición por roc2107; 05-mar-2008 a las 11:15.
LORIAN está desconectado   Responder Citando
Antiguo 05-mar-2008, 17:54   #9 (permalink)
Kinopio no se puede cailificar en este momento
 
Fecha de Ingreso: diciembre-2007
Ubicación: Frente al ordenador...
Mensajes: 93
Enviar un mensaje por MSN a Kinopio
Re: Imagen sobresaliente...

Lorian, podrías explicarme eso...de que quede exactamente igual??
__________________
----------------------------------------------------------
Algunas cosas simplemente son bellas...por que uno no puede tenerlas...
Kinopio está desconectado   Responder Citando
Respuesta
No hay votos aún.


Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 18:39.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93