Photoshop-Datei umwandeln in Web

Natsu Dragneel · 02/20/2018, 16:24

Hi Leute,
ich habe mal etwas kleines gebastelt in Photoshop und würde dies nun gerne in html/css wenns geht etwas javascript umschreiben.

Doch leider fehlen mir die Fähigkeiten dafür. Ich kann zwar die Grundlagen zur HTML/CSS etwas aber dennoch reicht es mir nicht mehr aus, da ich es vor paar Jahren erst gelernt hatte - jetzt fast verlernt.

Das ist das Bild was vorhanden ist:

Spoiler

Kurze Erläuterung dazu:

Die Navigationsleiste soll so behalten werden.
Sobald man auf eine Seite klickt (Startseite, Computer, Kontakt) soll der CENTER-Bereich sich automatisch je nach Text/Länge vergrößern und mit sich spielen lassen.
Das Logo bleibt bestehen.
Die Box (der Container in der Mitte) sollte sich auf jedes Display automatisch zentrieren aufm Bildschirm.
Der Hintergrund sollte so übernommen werden.

Wie müsste ich vorgehen, wenn ich in Photoshop anfange zu Slicen, was darf ich was darf ich nicht slicen?

Würde mich über eure Hilfe freuen.

Greets.

florian0 · 02/20/2018, 23:42

Bis auf das Logo, den Hintergrund und diesen horizontalen Teiler sehe ich jetzt nix was nicht mit CSS zu lösen wäre. border-radius und box-shadow wären so die Schlüsselwörter.
Welche Font ist das? Sieht aus wie Bebas Neue, die gibts auch als

.

Den Hintergrund so zuschneiden, dass ein wiederholbares Stück dabei rauskommt. Dann brauchst du keine Giga-Hintergrund-Datei. Das Logo kannst du transparent ausschneiden, dann passt es problemlos auf den Hintergrund.
Dann noch den horizontalen Teiler, ebenfalls transparent. Den Rest würd ich mit CSS machen.

Alternativ kannst du auch die Randstückchen in jeweils 1 vertikales, 1 horizontales und 4 Ecken auftrennen und dann mit border-image einsetzen, dann sparst du dir das rumgeeire mit Schatten und Ecken. Die Kategorie-Links so knapp wie möglich transparent ausschneiden, dann kannst du damit besser in deiner Vorlage arbeiten.

Im Footer is ein Tippfehler, just sayin ;D

Natsu Dragneel · 02/23/2018, 01:01

Quote:

Originally Posted by florian0

Bis auf das Logo, den Hintergrund und diesen horizontalen Teiler sehe ich jetzt nix was nicht mit CSS zu lösen wäre. border-radius und box-shadow wären so die Schlüsselwörter.
Welche Font ist das? Sieht aus wie Bebas Neue, die gibts auch als .

Den Hintergrund so zuschneiden, dass ein wiederholbares Stück dabei rauskommt. Dann brauchst du keine Giga-Hintergrund-Datei. Das Logo kannst du transparent ausschneiden, dann passt es problemlos auf den Hintergrund.
Dann noch den horizontalen Teiler, ebenfalls transparent. Den Rest würd ich mit CSS machen.

Alternativ kannst du auch die Randstückchen in jeweils 1 vertikales, 1 horizontales und 4 Ecken auftrennen und dann mit border-image einsetzen, dann sparst du dir das rumgeeire mit Schatten und Ecken. Die Kategorie-Links so knapp wie möglich transparent ausschneiden, dann kannst du damit besser in deiner Vorlage arbeiten.

Im Footer is ein Tippfehler, just sayin ;D

Hab dir das folgende per PN zwar geschickt, aber vielleicht meldet sich noch jemand

Ich habe es mal so gemacht wie du es gesagt hast.

Spoiler

Hier siehst du die Bilder die ich ausgeschnitten habe. Wie du gesagt hast, jeweils 4 Ecken (oben rechts/links, unten rechts/links), dazu jeweils horizontale linke und rechte Seite, wie die vertikale linke und rechte Seite. Anschließend die Trenner in der Mitte, die Menüpunkte, das Logo und den BG erwischt.

Nun habe ich es alles in eine Datei gepackt und da ich auch garnicht so gut in Programmieren bin habe ich es bis jetzt so weit geschafft:

Spoiler

Wie du hier siehst, wiederholt sich das vertikale obere und unten links siehst du, dass es die obere rechte Ecke ist, die auch mehrmals angezeigt wird.

Aktuell sieht es bei mir so aus im Code:

Spoiler

und im CSS:

Spoiler

Das mit dem Logo und dem BG ist ein Kinderspiel aber das mit der Box in der Mitte ist mir Spanisch. Du sagtest "border-image" wäre da die Lösung, habe gegooglet und dies und jenes habe dann daraus folgendes hingeschrieben:

Spoiler

Wobei ich garnicht genau verstanden habe, ob dies überhaupt so richtig ist, passt oder gar falsch ist. "border-image-repeat" gibts kein "none" und wie ich die Ecken, dazu noch die horizontale und vertikale linke und rechte Seite einfügen soll, weiß ich auch gar nicht. Dann den Inhalt des Boxes befüllen und beschmücken..

Könntest du mir dabei helfen?

#EDIT:

Ich habe jetzt eine gemischte Suppe gemacht, ich weiß ist falsch aber anders blick ich einfach nicht durch - ich zerreiße mir mein Kopfffff gleich ....

Spoiler

Codeschnipseln:

Spoiler

Ich hab richtig reingeschissen, wie komme ich darauuuuuuuusss

Es ist weder mittig angeordnet, wenn ich es bei float:left; lasse dann den jeweiligen margin-left angebe springt es aus der Reihe. Ich kann es einfach nicht ich habs immer mal versucht aber geht nichttt...

type. · 02/23/2018, 12:59

Nyeh, ich mag diese Schnipselarbeit mit den ganzen Grafiken nicht, also hab ich mal fix was gebastelt. Vielleicht hilft dir das ja weiter. ^—^

HTML Code:

<div class="logo">
  <img src="logo.png" alt="ElekTech">
</div>

<div class="content">
  <p>Lorem Ipusm</p>
  <hr>
</div>

Code:

body {
  
  margin: 0; padding: 0;
  width: 100%; height: 100vh;
  
  background: url(bg.png) repeat #ffce00;
  
}



.logo {
  
  margin: 30px auto;
  width:450px; height:125px;
  
}



.content {
  
  margin: 30px auto; padding: 20px;
  width: 734px; height: 614px;
  
  border: 2px solid #ffce00;
  border-radius: 10px;
  box-shadow:
    0 0 10px 0 rgba( 0, 0, 0, 0.75 ),
    inset 0 0 3px 0 rgba( 0, 0, 0, 0.5 );
  background: #fffd9f;
  
}



hr {
  
  height: 3px;
  
  border: none;
  background: linear-gradient( to right, transparent, #ffce00, transparent);
  
}

Demo:

Natsu Dragneel · 02/24/2018, 18:41

Quote:

Originally Posted by type.

Nyeh, ich mag diese Schnipselarbeit mit den ganzen Grafiken nicht, also hab ich mal fix was gebastelt. Vielleicht hilft dir das ja weiter. ^—^

HTML Code:

<div class="logo">
  <img src="logo.png" alt="ElekTech">
</div>

<div class="content">
  <p>Lorem Ipusm</p>
  <hr>
</div>

Code:

body {
  
  margin: 0; padding: 0;
  width: 100%; height: 100vh;
  
  background: url(bg.png) repeat #ffce00;
  
}



.logo {
  
  margin: 30px auto;
  width:450px; height:125px;
  
}



.content {
  
  margin: 30px auto; padding: 20px;
  width: 734px; height: 614px;
  
  border: 2px solid #ffce00;
  border-radius: 10px;
  box-shadow:
    0 0 10px 0 rgba( 0, 0, 0, 0.75 ),
    inset 0 0 3px 0 rgba( 0, 0, 0, 0.5 );
  background: #fffd9f;
  
}



hr {
  
  height: 3px;
  
  border: none;
  background: linear-gradient( to right, transparent, #ffce00, transparent);
  
}

Demo:

Boahhhhh ich liebe dich das ist doch mal was geiles und ich arbeite hier mit Photoshop die ganze Zeit......

Ich habe die Navi jetzt oben eingerichtet, so sieht es übrigens derzeit aus:

Spoiler

Ich möchte nun eigentlich so was in der Art mit Javascript einbauen um den Content nur zu ändern. Habe noch nie damit gearbeitet aber finde auch dazu grade nichts passendes um danach zu suchen. Habe schon nach HTML Javscript content einbinden und allem gesucht aber nichts gefunden.

Wenn ihr mir noch sagen könntet, wie man diese Funktion nennt, würde ich mich reinarbeiten.

Ansonsten bedanke ich mich bei euch beiden vom Herzen.

Würde nur noch halt wenn ich auf Computer Reparaturen klicke, dass unterhalb des <hr>-Tags der Content sich dementsprechend ändert. Noch etwas was mich übertrieben interessiert ist es (keine ahnung ob es möglich ist), dass man die in der <li> aufgeführten Punkte in der Navi die Text-Breite ändern kann, so dass dann z. B. bei "Computer Reparaturen", das "Reparaturen" unterhalb "Computer" zentriert erscheint.

Danke <3

xShizoidx · 02/24/2018, 19:00

Quote:

Originally Posted by abdu931

Boahhhhh ich liebe dich das ist doch mal was geiles und ich arbeite hier mit Photoshop die ganze Zeit......

Ich habe die Navi jetzt oben eingerichtet, so sieht es übrigens derzeit aus:

Spoiler

http://alpergmbh.de/test/

Ich möchte nun eigentlich so was in der Art mit Javascript einbauen um den Content nur zu ändern. Habe noch nie damit gearbeitet aber finde auch dazu grade nichts passendes um danach zu suchen. Habe schon nach HTML Javscript content einbinden und allem gesucht aber nichts gefunden.

Wenn ihr mir noch sagen könntet, wie man diese Funktion nennt, würde ich mich reinarbeiten.

Ansonsten bedanke ich mich bei euch beiden vom Herzen.

Würde nur noch halt wenn ich auf Computer Reparaturen klicke, dass unterhalb des <hr>-Tags der Content sich dementsprechend ändert. Noch etwas was mich übertrieben interessiert ist es (keine ahnung ob es möglich ist), dass man die in der <li> aufgeführten Punkte in der Navi die Text-Breite ändern kann, so dass dann z. B. bei "Computer Reparaturen", das "Reparaturen" unterhalb "Computer" zentriert erscheint.

Danke <3

Hier die Funktion, um per Ajax HTML nachzuladen und es direkt als HTML zu platzieren:

Denk daran, dass du vorher jQuery einbinden musst, falls du diese Funktion verwenden willst.

type. · 02/24/2018, 19:09

Im Zweifelsfall kannst du den Inhalt mit .innerText() bzw .innerHTML() ändern.
Für die Listenelemente hilft:

HTML

Code:

<li>Computer<br>Reparaturen</li>

CSS

Code:

li-selector {

  display: inline-block;

  text-align: center;

}

xShizoidx · 02/24/2018, 19:24

Habes mal überarbeitet, nun sollte es so sein wie du es haben willst:

Wenn du Computer Reparaturen klickst, lädt er die die dazugehörige .html Datei, welche du unter href angegebenen hast, per Javascript.

Natsu Dragneel · 02/26/2018, 22:17

Quote:

Originally Posted by xShizoidx

Hier die Funktion, um per Ajax HTML nachzuladen und es direkt als HTML zu platzieren:

Denk daran, dass du vorher jQuery einbinden musst, falls du diese Funktion verwenden willst.

Ich danke dir für die Hilfe, bin aber übertrieben durcheinander derzeit mit den ganzen Codes, da ich die ganze Zeit eine Sache versuchen will, und zwar "firstLoad"-Event oder derartiges festlegen. @siehe unten ->

Quote:
Originally Posted by type.
Im Zweifelsfall kannst du den Inhalt mit .innerText() bzw .innerHTML() ändern.
Für die Listenelemente hilft:

HTML
Code:
<li>Computer<br>Reparaturen</li>
CSS
Code:
li-selector {

  display: inline-block;

  text-align: center;

}

Ich danke auch dir dafür, hat mir mehr oder weniger geholfen!

Quote:

Originally Posted by xShizoidx

Habes mal überarbeitet, nun sollte es so sein wie du es haben willst:

Wenn du Computer Reparaturen klickst, lädt er die die dazugehörige .html Datei, welche du unter href angegebenen hast, per Javascript.

Und dir danke ich besonders vom Herzen, da du dir die ganze Mühe zum Schluss noch gegeben hast und mir das gebastelt hast mit euch Allem hier! Ich finde sowieso die Community überragend und jetzt bin ich mir auch im klaren Bewusstsein, dass dies der Fall ist!

@Ein Wunsch hätte ich noch gerne, ich habe das mit jQuery nun, die Seiteninhalte der jeweiligen .html-Dateien laden sich nun, alles läuft flüssig, schön und gut. Meine andere Frage: Kann ich, wenn ich auf die Internetseite "www.seite.de" reinkomme mit jQuery bestimmen, welches Dokument als erstes geöffnet und geladen werden soll (innerhalb des "content"-Bereiches).

Ich möchte quasi die Startseite (home.html) beschmücken und der Inhalt soll ja innerhalb erscheinen, funktioniert ja auch alles gut, nur das wenn die Seite geöffnet wird in dem Fall die index.html soll der Inhalt aus home.html direkt geladen werden.

Mad0ck · 03/08/2018, 17:14

ist jQuery nicht nur für Animationen, Boxen öffnen whatever da ?
So hab ich es von meinen Kollegen damals in Erinnerung, welcher für das Design und layout zuständig war.

Du könntest nen Verweis in der index. auf home. machen.
Bzw. Sie includen so müsste die Funktion heißen.
So hat es mein Kollege damals gemacht:

Spoiler

hoffe es ist so richtig / konnte dir helfen

Der-Eddy · 03/08/2018, 17:43

Quote:

Originally Posted by Mad0ck

ist jQuery nicht nur für Animationen, Boxen öffnen whatever da ?
So hab ich es von meinen Kollegen damals in Erinnerung, welcher für das Design und layout zuständig war.

jQuery ist eine allgemeine Javascript Bibliothek die alles mögliche hinzufügt
Animationen sind nur ein kleiner Bestandteil des Funktionsumfanges

Mad0ck · 03/08/2018, 18:10

Quote:

Originally Posted by Der-Eddy

jQuery ist eine allgemeine Javascript Bibliothek die alles mögliche hinzufügt
Animationen sind nur ein kleiner Bestandteil des Funktionsumfanges

Oh das wusste ich gar nicht