Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWünsch Dir wasWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Moderne Website erstellen (Photoshop,CSS,HTML)

Mitglied: bootmeup

bootmeup (Level 1) - Jetzt verbinden

23.09.2010 um 16:46 Uhr, 10023 Aufrufe, 1 Kommentar

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
Mitglied: Florian.Sauber
23.09.2010 um 18:44 Uhr
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.
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...

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...

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.

Ansonsten rate ich immer, in der nächsten Bibliothek vorbeizuschauen und nach etwas in der Art zu schauen:

Viel Spass und Erfolg
Florian
Bitte warten ..
Ähnliche Inhalte
Batch & Shell
Powershell html und css Anpassungen
gelöst Frage von H41mSh1C0RBatch & Shell7 Kommentare

Guten Morgen in die Runde, ich bin ja nicht so der Freund vom Webseiten bauen, aber damit der Export ...

HTML

HTML, CSS: Mapping auf dynamischen Hintergrund

gelöst Frage von Judo99HTML2 Kommentare

Ist es möglich, einerseits ein Bild als Hintergrundbild zu verwenden, welches auf allen möglichen Bildschirmgrößen voll skaliert wird und ...

CSS

Html, css und js nach Links durchsuchen

Frage von StefanKittelCSS3 Kommentare

Hallo, nachdem ich recht frustriert festgestellt haben dass httrack nicht nutzbar ist (Bug im Proxy) suche ich aktuell nach ...

Windows 10

W10 modern Apps sideloaden

gelöst Frage von NetzwerkDudeWindows 103 Kommentare

Moin, ich würde gerne den 3D Builder ohne einen aktiven W10Store installieren, dazu würde ich aber die .appxbundle Datei ...

Neue Wissensbeiträge
Microsoft
The Premier Field Engineering Blog is MOVING!
Information von Dani vor 17 StundenMicrosoft

Hello to all of our AWESOME readers that have helped us build the Premier Field Engineering TechCommunity blog up ...

Sicherheit
Alexa un Co. TU-Darmstadt entwickelt Anti-Spy Tool
Information von the-buccaneer vor 1 TagSicherheit3 Kommentare

Moinsen! HR-Info hatte heute ein Feature in dem das "LeakyPick" der TH-Darmstadt vorgestellt wurde. Das Tool existiert bisher nur ...

Linux Tools
Rsync datenvolumen reduzieren mit -fuzzy
Anleitung von NetzwerkDude vor 4 TagenLinux Tools

Moin, aus der Kategorie "Häufig übersehene Parameter": Meistens benutzt kaum jemand den fuzzy Parameter von rsync, und er taucht ...

Sicherheit

Citrix ADC, Gateway u. SD-Wan: Schwachstellen patchen

Information von kgborn vor 6 TagenSicherheit

Keine Ahnung, wie viele Admins von Citrix-Applicances hier unterwegs sind und ob die Versorgung mit Advisories klappt. Aber im ...

Heiß diskutierte Inhalte
Festplatten, SSD, Raid
Backup einer an die FRITZBox angeschlossenen Festplatte
Frage von DJ-KeyFestplatten, SSD, Raid35 Kommentare

Habe eine Frstplatte, die mehrere Partitionen beherbergt. Die Festplatte die an der FRITZ!Box als NAS dient ist schon älter ...

Windows Server
Anmelden via RDP bringt "Passwort fehlerhaft" - lokale Anmeldung möglich
Frage von it-froschWindows Server34 Kommentare

Hallo Kollegen, Windows Server 2012 Wir haben einen Server, an dem wir uns mit einem lokalen Account anmelden. Die ...

Exchange Server
Exchange CAL Lizenzen?
gelöst Frage von KleinProfiExchange Server16 Kommentare

Hallo Jungs, wir sind in der Firma 10 Mann, haben aber auf dem Exchange 15 Postfächer bzw. 15 User ...

Grafikkarten & Monitore
Multi Monitor HDMI Bildschirm verschwindet
Frage von FMParadisoGrafikkarten & Monitore15 Kommentare

Hallo Zusammen, ich habe ein Problem mit meinem Monitor-Setup. Leider weiß ich auch, dass es wohl locker (mindestens) 5 ...