1
Moderne Website erstellen (Photoshop,CSS,HTML)
Hallo Leute,
ich bin gerade dabei mich in die Kunst der Webentwicklung einzuarbeiten.
Naja besser gesagt nur in das Erstellen eines Designs.... Programmiertechnisch habe ich keine Schwierigkeiten und bin auch relativ vortgeschritten in mehreren Sprachen.
nun zu meiner eigentlichen Frage.
Das Erstellen einer einfachen Seite mit normalen HTML und CSS ist kein Problem aber damit kann man eben nicht alles erreichen darum bin ich jetzt auf Photoshop gekommen...
So langsam komme ich auch rein und kann schon relativ schöne Grafiken und daraus eine einfache Website erstellen (Grafik slicen und csss und html dateien erstellen), jedoch fehlen mir noch die Infos ein etwas "komplexeres" Design in HTML umzusetzen.
Beispiel:
hier http://www.adobetutorialz.com/categories/Adobe-Photoshop/Web-Layout ist eine Seite mit wirklich vielen und guten Designs mit Anleitung
aber leider nicht wie man das ganze dann auch webfähig macht...
z.b. dieses Design: http://www.adobetutorialz.com/articles/2856/1/Stylish-WebStudio-Web-Lay ...
wie sollte man hier "slicen" um z.b. das obere Menü lauffähig zu bekommen.. also damit die Links anklickbar sind?
hat jemand vielleicht noch ein paar Infos zur Umsetzung einer Webseite mit Photoshop von Anfang bis Fertigstellung?
VIele Grüße
ich bin gerade dabei mich in die Kunst der Webentwicklung einzuarbeiten.
Naja besser gesagt nur in das Erstellen eines Designs.... Programmiertechnisch habe ich keine Schwierigkeiten und bin auch relativ vortgeschritten in mehreren Sprachen.
nun zu meiner eigentlichen Frage.
Das Erstellen einer einfachen Seite mit normalen HTML und CSS ist kein Problem aber damit kann man eben nicht alles erreichen darum bin ich jetzt auf Photoshop gekommen...
So langsam komme ich auch rein und kann schon relativ schöne Grafiken und daraus eine einfache Website erstellen (Grafik slicen und csss und html dateien erstellen), jedoch fehlen mir noch die Infos ein etwas "komplexeres" Design in HTML umzusetzen.
Beispiel:
hier http://www.adobetutorialz.com/categories/Adobe-Photoshop/Web-Layout ist eine Seite mit wirklich vielen und guten Designs mit Anleitung
aber leider nicht wie man das ganze dann auch webfähig macht...
z.b. dieses Design: http://www.adobetutorialz.com/articles/2856/1/Stylish-WebStudio-Web-Lay ...
wie sollte man hier "slicen" um z.b. das obere Menü lauffähig zu bekommen.. also damit die Links anklickbar sind?
hat jemand vielleicht noch ein paar Infos zur Umsetzung einer Webseite mit Photoshop von Anfang bis Fertigstellung?
VIele Grüße
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 151649
Url: https://administrator.de/contentid/151649
Ausgedruckt am: 22.11.2024 um 06:11 Uhr
1 Kommentar
Zitat von @bootmeup:
Das Erstellen einer einfachen Seite mit normalen HTML und CSS ist kein Problem aber damit kann man eben nicht alles erreichen darum bin ich jetzt auf Photoshop gekommen...
Da verstehst Du wohl etwas falsch?! In PS erstellst Du "nur" das graphische Layout, alles andere läuft dann über (X)HTML/CSS.Das Erstellen einer einfachen Seite mit normalen HTML und CSS ist kein Problem aber damit kann man eben nicht alles erreichen darum bin ich jetzt auf Photoshop gekommen...
So langsam komme ich auch rein und kann schon relativ schöne Grafiken und daraus eine einfache Website erstellen (Grafik slicen und csss und html dateien erstellen), jedoch fehlen mir noch die Infos ein etwas "komplexeres" Design in HTML umzusetzen.
Slicen ist nur eine "Vereinfachung" von Photoshop um relativ statische Layouts in Einzelteile zu zerlegen. Bei überschneideneden Bereichen arbeitest Du besser mit den einzelnen Ebenen und teiltransparenten Elemnten respektive deren Überschneidungen.Anders sieht es aus, wenn Du in de Kompletten Creative Suite (z.B. Design Premium) unterwegs bist.
hier http://www.adobetutorialz.com/categories/Adobe-Photoshop/Web-Layout ist eine Seite mit wirklich vielen und guten Designs mit
Anleitung aber leider nicht wie man das ganze dann auch webfähig macht...
Mit ausgeklügeltem CSS...Anleitung aber leider nicht wie man das ganze dann auch webfähig macht...
z.b. dieses Design: http://www.adobetutorialz.com/articles/2856/1/Stylish-WebStudio-Web-Lay ...
wie sollte man hier "slicen" um z.b. das obere Menü lauffähig zu bekommen.. also damit die Links anklickbar
sind?
So, dass Du eine Balance aus Maximaler "Linkgröße" und minimalem "Buttonverschnitt" hast. In dem Fall kannst Du die ja beinahe noch plan aneinader ordnen. Wenns feiner sein soll, musst Du mit verschiedenen verschachtelten oder überlappenden CSS-definierten Bereichen arbeiten...wie sollte man hier "slicen" um z.b. das obere Menü lauffähig zu bekommen.. also damit die Links anklickbar
sind?
hat jemand vielleicht noch ein paar Infos zur Umsetzung einer Webseite mit Photoshop von Anfang bis Fertigstellung?
Das Netz bietet reichlich Tutorials, aber wenn es etwas anspruchsvoller wird, sind dabei eben die Bereich Layoutgestaltung(PS) Logische Auszeichnung/Aufbau (HTML) und Anordnung/Gestaltung (CSS) getrennt.Lehrreich könnten u.a. folgende Seiten sein.
- http://www.psd-tutorials.de/
- http://djdesignerlab.com/2010/04/07/30-excellent-photoshop-web-layout-d ...
- http://www.drweb.de/start/
- http://www.hongkiat.com/blog/40-greatest-web-interface-design-tutorials ...
- http://www.photoshopcafe.com/tutorials/super%20tutorial%202/website.htm
- http://jendryschik.de/wsdev/einfuehrung/
Ansonsten rate ich immer, in der nächsten Bibliothek vorbeizuschauen und nach etwas in der Art zu schauen:
- http://www.philip-fuchslocher.de/weblog/powerworkshops-webdesign-mit-ph ...
- http://www.amazon.de/gp/product/3826656075/ref=pd_lpo_k2_dp_sr_2?pf_rd_ ...
Viel Spass und Erfolg
Florian
