Diseño en imagen, necesito cortar, css y html

jafp_pe · #1 (**permalink**) 17/01/2012, 12:28

Bueno termine de diseñar en firework un bonito diseño y ahora no se como comenzar para maquetar el diseño, quiero hacerlo por partes quiero comenzar por el centro y es por eso que les traigo mi imagen a maquetar, suplico que me ayuden con tablas podría cortar la imagen esquina izquierda, derecha, fondo una linea un px , y no se algo asi, y ponerlo como fondo en la tabla, pero en css estoy perdido que podría hacer, seguro con clases pero como? los muevo los ordeno? alings? floats? como se hace ayudenmepor favor, muchas gracias por su ayuda.

cristian_cena · #2 (**permalink**) 17/01/2012, 15:34

Hola, te comparto el marcado y el maquetado básico,
Si no trabajas con html5 reemplazá los tags: section. header, article y footer por divs con clases ejemplo: para section podes hacer <div class="section"> y en los estilos reemplazar section{} por .section{}

Código HTML:

Ver original<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*tu reset: eric meyer, html5doctor, boilerplate, etc.*/ *{margin:0 auto;}
        body{
            font-size:; 
        }
        section{ overflow: hidden;}
            .imagen{
                float:left;
                width:;
            }
                .imagen img{
                    display:block;
                    width:;
                    height:;
                }
                .imagen .social{}
            .post{
                float:left;
                width:;
            }
                .post header{
                    background: url("ruta/directorio/star.png") 0 0 no-repeat;
                }
                .post header h2{
                    margin:0 0 0 ...px; /*left*/
                }
                .post article{
                    padding:;
                    border: 1px solid #707070;
                    -webkit-border-radius:;
                    -moz-border-radius:;
                    border-radius:;
                }
                .post footer{}
                    .post footer a{}
                    .post footer span{}
    </style>
</head>
<body>
    <section> 
        <div class="imagen">
            <img src="" alt="">
            <div class="social"></div>
        </div>
        <div class="post">
            <header>
                <h2>{{primer postal}}</h2>
            </header>
            <article>
                {{contenido}}
            </article>
            <footer>
                <a href="#">{{categoría}}: </a>
                <a href="#">{{cat1}}</a> <span>,</span>
                <a href="#">{{cat2}}</a> <span>,</span>
                <a href="#">{{catn}}</a> <span>
            </footer>
        </div>
    </section>
    <!-- copias y pegas tantos section como necesites, en tu imagen son 2 -->
</body>
</html>

Fijate que solo tenés que rellenar las propiedades. ya más que eso sería hacerte todo el trabajo así que te invito a que lo termines con la ayuda de este manual, en concreto este capítulo o bien de algún otro compañero.

Suerte.

jafp_pe · #3 (**permalink**) 17/01/2012, 15:47

Gracias cristian!:) por tu celestial respuesta , pero de que manera cortaría mi diseño los botones , las lineas, bordes, el diseño. Solo lo dibuje, :( se que son preguntas tontas pero por favor comprensión aprenderé y seré de gran ayuda aquí, haber leere el manual y estaré esperando mas ideas y respuestas, mil gracias! Cristian!

cristian_cena · #4 (**permalink**) 17/01/2012, 16:12

Cita:

Iniciado por jafp_pe

pero de que manera cortaría mi diseño los botones, las lineas, bordes, el diseño.

Para recortar en photoshop: Mi método, no quiere decir que sea el único ni el mejor:

ctrl+shift+c para copiar convinado
ctrl+n y creas un nuevo documento con las medidas exactas de la seleccion
ctrl+v para pegar
ctrl-shift+alt+s para guardar para web

En photoshop también tenes la herramienta "sector", su ícono es como un cutter. Con ella podes recortar un documento entero, en ocasiones te será útil.

para recortar en fireworks: Es más facil

seleccionas el objeto vectorial o haces una selección común
click en edición del menú superior
click en recortar el documento -> archivo -> "guardar como"
una vez guardado: ctrl+z para volves hacia atras y seguir recortando

Bye

C2am · #5 (**permalink**) 17/01/2012, 17:21

En realidad si lo hiciste en firework solo tienes que guardar cada capa por separado (en otro archivo .png o jpg o gif)

Es decir el fondo lo guardas en un archivo fondo.png, ya que seguro es un rectángulo con degradado que en realidad no tiene toda la altura de la página.

El recuadro donde va la imagen: fondoimagen.png

Y el recuadro donde va el texto: fondotexto.png.

Lo ideal es que el fondo o color de relleno sea transparente para poder aplicarlo más allá del color de fondo de la página.

En cuanto a los botones de redes sociales, los puedes guardar por separado: face.png, twit.png etc. (o .gif)

Y las lineas punteadas que usas de separador puedes guardar una imagen de 1px por 1xp con la imagen de uno o dos punto y luego repetirla en x.

Una vez que tienes todas las imágenes en archivos separados aplicas lo que te dijo cristian y listo.

Claro que tanto el recuadro para la imagen y para el texto lo podrías lograr (algo similar no igual) con css.

Saludos

jafp_pe · #6 (**permalink**) 17/01/2012, 17:27

c2am muchas gracias por su respuesta, es verdad que lo hice en firework pero no lo hice con capas jejeje, simplemente dibuje rectángulos le di sombra , etc entonces debería cortarlo de la manera mas conveniente por ejemplo izquierda menu, fondo derecha menu, y eso pasarlo al css, intentare, leyenda manual :D ,comprendiendo ..01% u.u

C2am · #7 (**permalink**) 17/01/2012, 17:33

¿Y como lo guardaste?
Porque si lo guardaste como .png cada elemento que dibujaste queda individualizado y puedes hacer lo que te comente más arriba.