register Paswoord vergeten?

[tut] Slice tutorial... a must know for photoshop webdesign

Tutorials omtrent eender welke vorm van design..

[tut] Slice tutorial... a must know for photoshop webdesign

Berichtdoor PC_kuijper op wo 19 dec 2007 9:28 pm

deze keer zal ik een Slice tutorial maken omdat dat toch onbekent is maar toch erg makkelijk. en makkelijk voor webdesign.
dit is de PSD file die we gebruiken
http://rapidshare.com/files/77502941/slice_tut_file.psd

we beginnen met een simpele "site" die ik net ffies gemaakt heb.
Afbeelding


daarna pakken we de Slice tool
Afbeelding
.
en beginnen we met de 1e slice. ik begin meestal op deze manier (dit kan gelijk je BG worden voor je site). gebruik de tool door een klik in de hoek te geven

en hem ingedrukt houden tot je selectie klaar is van de slice.
Afbeelding


hierna gaan we de bovenkant doen, daarna linkerkant en als laatste de onderkant.
Afbeelding


ik heb het maar gelijk gedaan zodat de tut iets korter is dan als ik elke slice stuk voor stuk zou laten zien.

ik raad je aan om elke slice te beginnen in een hoek zodat je slice makkelijk blijft en je niet elke slice hoeft te veranderen.
nu we deze 4 slices hebben (alle 4 randen) beginnen we met de inhoud. de header doen we als eerste. dit is ook gelijk de simpelste gewoon 1 groote rechthoek.

zorg dat je alle hoeken goed bedenkt heb dit maakt het later veranderen van je header ook gemakelijker.
Afbeelding


nadat je dit gedaan hebt beginnen we met het stukje onder de header. ook deze is erg gemakkelijk.
Afbeelding


nu je dit gedaan hebt gaan we het menu doen. ik raad iedereen aan om de hoeken en randen apart te houden van het midden zodat de inhoud van de links later

nog kan worden aangepast op een makkelijke manier. ik heb hem gelijk helemaal gedaan.
Afbeelding


nadat je dit gedaan hebt gaan we door met die daaronder op precies dezelfde manier. ook doen we de strook rechts van de menu's en links van de homepage. ik

zal ze alvast allemaal doen zodat je kan zien hoe het eruit ziet.
Afbeelding


nu we dit hebben gaan we naar de laatste slice alweer de Inhoud (homepage) dit doen we op dezelfde manier als de menu's alleen ditmaal wat groter natuurlijk.

maar toch is deze iets anders. de homepage text staat er alleen om te vertellen wat voor opbject het is. dus is de bovenste slice kleiner dan die van de

menu's waar de text er wel hoort. dus inplaats van 1 groote doen we een kleine boven en onderaan het gedeelte.
Afbeelding


nu we alle slice's hebben is het tijd om hem op te slaan onder de juiste instellingen.
ga hiervoor naar File>>>Save for web and devices (sneltoets Ctrl + Shift + Alt + S).
hier krijg je waarschijnelijk zoiets.
Afbeelding


de instellingen zoals ik ze het prettigst vind zijn hetvolgende.
Afbeelding


PNG heeft namelijk (iets) betere kwaliteit zeker als je transparancy dinge hebt. verder is hier iet veel meer te veranderen. ik zou voor jezelf ff rondkijken

met alle instellingen en ff uitproberen wat er allemaal is. om op Save te klikken. dan krijg je zoiets.
Afbeelding


sla de HTML file op als (je eigen naam) en klik op save. en dan krijg je zoiets.
Afbeelding


hier staan je plaatjes in de Images map en je .HTML file staat er ook.
verder is het meer HTML editen plaatjes die je wilt veranderen, en verder en daar ga ik niet over... daarvoor moet je bij andere mensen zijn.

nog 1 ding bij de slice tool staan 2 tools de eerste is om slice's te maken de andere is om bestaande slices te bewerken.

bedankt voor het lezen en succes met het slicen van je eigen website.
tot de volgende tutorial.

Created by PC_kuijper (PC-Design)
Afbeelding

Afbeelding

Afbeelding
PC_kuijper
Onwetende
Onwetende
 
Berichten: 12
Karma: 0
Geregistreerd op: di 18 dec 2007 7:48 pm

Berichtdoor Longshanks op do 20 dec 2007 10:22 am

Meestal trekt die photoshop gegenereerde HTML op de zak hoor... Spreek uit ervaring ;)

Voor de rest, slicen is niet zo moeilijk hé, het moeilijkste komt wnr je zelf de code gaat schrijven. Maar goed uitgelegd :)
Avatar gebruiker
Longshanks
Onwetende
Onwetende
 
Berichten: 2013
Karma: 0
Geregistreerd op: vr 16 feb 2007 7:44 pm
Woonplaats: Regio Ieper

Berichtdoor loc op do 20 dec 2007 10:57 am

Ik snap niet waarom mensen zo'n gecompliceerde slice manieren toepassen ik doe dat meestal met MS paint. :) Vierkantjes uit een layout foto knippen is toch niet moeilijk?
Avatar gebruiker
loc
Onwetende
Onwetende
 
Berichten: 1092
Karma: 0
Geregistreerd op: ma 20 feb 2006 10:07 pm
Woonplaats: West-Vlaanderen

Berichtdoor kennethos op do 20 dec 2007 4:06 pm

loc schreef:Ik snap niet waarom mensen zo'n gecompliceerde slice manieren toepassen ik doe dat meestal met MS paint. :) Vierkantjes uit een layout foto knippen is toch niet moeilijk?

Met photoshop kan je het veel gedetailleerder doen hoor..
vind ik toch :mrgreen:
--kennethos--
kennethos
Onwetende
Onwetende
 
Berichten: 110
Karma: 0
Geregistreerd op: ma 25 dec 2006 9:35 pm

Berichtdoor brugesboytillidie op ma 30 jun 2008 12:25 pm

heb je toevallig de foto's nog, ik wou de tut is bekijken, maar alles lijkt weg? :)
Avatar gebruiker
brugesboytillidie
Onwetende
Onwetende
 
Berichten: 3963
Karma: 2
Geregistreerd op: za 17 dec 2005 5:08 pm

Berichtdoor Mylo op ma 30 jun 2008 1:11 pm

brugesboytillidie schreef:heb je toevallig de foto's nog, ik wou de tut is bekijken, maar alles lijkt weg? :)
ja ik wil het ook nog wel eens zien :)
Afbeelding

Adriana :heartbeat:
Avatar gebruiker
Mylo
Onwetende
Onwetende
 
Berichten: 361
Karma: 0
Geregistreerd op: do 22 mei 2008 9:23 pm

Berichtdoor Dahaka op ma 30 jun 2008 3:11 pm

Ik zet hier voorlopig een slotje op.. ik zal de persoon in kwestie een pm sturen om te vragen of hij zijn tutorial opnieuw wil updaten.
Afbeelding
Avatar gebruiker
Dahaka
Onwetende
Onwetende
 
Berichten: 7510
Karma: 6
Geregistreerd op: zo 05 maart 2006 1:20 pm
Woonplaats: Manga land... (juist naast TTN land)


Keer terug naar Tutorials

Wie is er online

Gebruikers op dit forum: Geen geregistreerde gebruikers en 1 gast