Webdesign Photoshop

SarahS · 16.12.2012

hey ihr süßen,

hab da wieder ein problem, und weiß, die großen starken Photoshop Männer können mir bestimmt helfen!

wenn ich in Photosop ein Bild erstelle und das dann mit dem slice werkzeug, demenstrechend zerlege, ist es statisch und kleiner als browser. man kann es zwar zentrieren, doch wie schaffe ich es, dass es egal bei welcher auflösung, über den ganzen bildschirm liegt.

danke jungs,

kiss sarahs

hub · 16.12.2012

AW: Webdesign Photoshop

Moin moin,
das ist zwar nicht mein Fachgebiet, aber folgendes funkrioniert:

style.css:

HTML:

div.hg {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 overflow: hidden;
}
.hg img {
 border: none;
 margin: 0;
 height: 100%;
 width: 100%;
}
div.vg {
 position: relative;
 width: 600px;
 min-height: 400px;
 margin: 20px auto; 
 background-color: #FFFFFF;
}

index.html (oder wie auch immer):

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link type="text/css" href="style.css" rel="stylesheet"/>
</head>
<body>
<div class="hg"><img alt="" src="dein.bild.jpg"></div>
<div class='vg'>
<h1>der test</h1>
</div>
</body>
</html>

wobei du Doctype, Farben usw. anpassen müsstest ...
Meine bedenke dabei wären, das sich bei unterschiedlichen Fenstergrößen auch die Seitenverhältnisse des Bildes ändern.

Gruß Ulli

cythux · 16.12.2012

AW: Webdesign Photoshop

Geht es hier um slicen oder wie man die Seite umsetzt vom Code her. Ansonsten würde ich empfehlen mit sprites zu arbeiten, dadurch hat man mehr performence.

Zuden würde ich mal empfehlen sich mit Reponsive Design durch zu lesen bzw googlen

hub · 16.12.2012

AW: Webdesign Photoshop

Moin,
nach dem Beitrag dazwischen und nochmaligem Lesen deines Beitrags, vermute ich, du meinst ein "liquid layout" ?
Geht es dir um den prinzpiellen Einsatz von Css findest du hier z.B. Lösungsansätze.
Da es viele Möglichkeiten zum Umsetzen gibt müsste man zumindest ansatzweise sehen, was es werden soll.

Gruß Ulli

Andre_S · 17.12.2012

AW: Webdesign Photoshop

Der Code funktioniert sowieso nicht bei "gesliceten" Bildern, da diese ja nicht mehr als ein "deinbild.jpg" behandelt werden, sondern zerlegt in eine Tabelle gepackt werden.

Edit ich würde dieses Vorhaben sowieso überdenken da es max. in einer einzigen Monitorgröße gut aussieht und in allen anderen verpixelt aussieht.

hub · 17.12.2012

AW: Webdesign Photoshop

moin moin,
@Andre_S: darum hatte ich mich korrigiert? Es gibt durchaus auch Seiten mit einem liquid Layout, die gut aussehen - das liegt am Geschick des Designers.

@TE: Es lommt ganz auf dein Layout an, was da zu tun ist. Du musst dich entscheiden, welche Parts eine feste Größe haben sollen und welche sich in ihrer Breite/Höhe ändern dürfen.
Ohne zu wissen, wie deine Vorlage aussieht und wie sich das Layout bei Größenänderung verhalten soll, ist es schwer, dir einen Rat zu geben.
Die Kunst besteht darin, alle "fixen" Teile von den sich ändernden Teilen zu trennen und darsustellen (Ränder, Ecken, Flächen). Eine Box würde demnach aus 9 Teilen bestehen:
- 4 Ecken, bei denen nichts passiert, außer das sie immer an der richtigen Stelle sind
- linke und rechte Kante, die sich bei Bedarf in iher Höhe ändern können
- obere und untere Kante, die sich entsprechend in ihrer Breite ändern können
- der Inhalt, der sich dann in Breite und /oder Höhe anpasst (über css mit repeat)
Alles in Allem erfordert es eine etwas aufwändigere Planung für die Erstellung der Slices und dem Bau des Grundgerüsts als bei einem fixem Layout...

Gruß Ulli