Archief - Photoshop: Layout slice

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
B

Blue Thunder

Legacy Member
Hallo

http://users.pandora.be/thatlittleone/layout/layout.html

Dit is mijn eerste layout in photoshop, ik heb de navigatiebar al helemaal kunnen maken en slice, maar ik zit nog met een probleem met die content box, ik heb daar dus ook ne slice van gemaakt, en ik dacht als ik die nu als background zet in die table dan is da opgelost, maar dan is da helemaal vervormt, kan iemand mij hier bij helpen.

alvast bedankt
D

DarkBone

Legacy Member
Ge sliced compleet verkeerd, daarbij hoeft die navigatiebalk zelf nie uit images te bestaan maar kan dat evengoed tekst zijn, aangezien het toch maar tekst getypt is in photoshop met een kleurtje. Je hebt dan enkel een backgroundimage nodig.

Ge kunt deze layout met 8 kleine images en wat gezond verstand namaken (4 hoekjes en 4 verbindingsstukken tussen de hoekjes). Alhoewel dat uw inner shadow misschien toch wat te groot zijn om dat te doen, ff proberen.
B

Blue Thunder

Legacy Member
jaja ma da was de vraag dus ni hé ;) , ik heb da maar gedaan om da zo een beetje onder de knie te krijgen da slicen
D

DarkBone

Legacy Member
Nochtans zit er een verborgen antwoord op uw vraag in.

Gebruik verbindingsstukjes die zich verticaal/horizontaal kunnen herhalen en zet die als achtergrond.
F

FalcoX

Legacy Member
Maak je die Layout slice in Photoshop zelf of in ImageReady? Iemand die weet waar ik een cursus kan vinden om het in photoshop te leren of is het makkelijker dan ik denk?
D

Dece

Legacy Member
FalcoX zei:
Maak je die Layout slice in Photoshop zelf of in ImageReady? Iemand die weet waar ik een cursus kan vinden om het in photoshop te leren of is het makkelijker dan ik denk?
Klik om te vergroten...
als ge iets of wat van inzicht in html hebt is het idd gemakkelijk. indien je zonder nadenken in het ijle gaat zitten vierkantjes trekken, dan vrees ik voor de zaak.

PS: gebruik geen imageready code, maar schrijf een nieuwe (overzichtelijkere) code
g

geo

Legacy Member
Dece zei:
PS: gebruik geen imageready code, maar schrijf een nieuwe (overzichtelijkere) code
Klik om te vergroten...

Zeer juist.

Maar uwen boel is echt niet goed gedaan. Je moet eigenlijk niet gaan slicen en dan letterlijk alle images gaan gebruiken. Die gele tekst zou je gemakkelijk bv gewoon als 'tekst' kunnen typen in je HTML bestand, en die 'schaduw' of wat het ook is (die box der rond dus) moet je dan via css ofzo gaan gebruiken als achtergrond.

Dus als je sliced moet je ook goed weten wat je wil blijven behouden als 'afbeelding' en wat je gaat veranderen naar tekst!
I

InnerChild

Legacy Member
ik ben nu ook toevallig bezig met een site te ontwerpen..Ik begin pas dus lay-out is ni perfect (meeste gedaan met photoshop/imageready) + de header moet nog komen.

Nu moet ik dus nog leren dit alles in een goeie code te gieten, maar ben dus blijkbaar al verkeerd bezig want ik heb mijn knoppen ook in photoshop gemaakt :s

maar als ik het zo lees moet ik dus van men rechterkant van de site alleen een paar stukken slicen en die dan zo in elkaar steken dat ze in elkaar vloeien?

link: site
D

DarkBone

Legacy Member
InnerChild zei:
ik ben nu ook toevallig bezig met een site te ontwerpen..Ik begin pas dus lay-out is ni perfect (meeste gedaan met photoshop/imageready) + de header moet nog komen.

Nu moet ik dus nog leren dit alles in een goeie code te gieten, maar ben dus blijkbaar al verkeerd bezig want ik heb mijn knoppen ook in photoshop gemaakt :s

maar als ik het zo lees moet ik dus van men rechterkant van de site alleen een paar stukken slicen en die dan zo in elkaar steken dat ze in elkaar vloeien?

link: site
Klik om te vergroten...

Hetgeen ik daar zie van effecten op het menu kan perfect met behulp van xHTML en CSS nagebootst worden.

En dan dit:
http://users.skynet.be/innerchild/site/images/index_05.gif

Hoe gaat ge daar in godsnaam een tekst/inhoud van variabele lengte inkrijgen. Ik zeg het opnieuw: knip ieder hoekje apart uit en neem een stukje uit de verbindingen tussen die hoekjes zodat je die horizontaal en verticaal kan laten herhalen als achtergrond. Zodoende kan uw inhoud zo groot zijn als maar kan, uwlayout zal het effect geven van mee uit te rekken omdat ge met herhalende elementen zit tussen uw hoekjes.
s

superfot

Legacy Member
Dece zei:
PS: gebruik geen imageready code, maar schrijf een nieuwe (overzichtelijkere) code
Klik om te vergroten...

... en doe het dan meteen helemaal goed en stop met slicen maar schrijf semantisch correcte (X)HTML, die je aanvult met CSS voor alles wat met layout en grafische elementen te maken heeft. Voor je het weet heb je beter leesbare code, een beter toegankelijke en makkelijker onderhoudbare site, en iets om je collega's die nog steeds met tables werken mee te imponeren.
I

InnerChild

Legacy Member
DarkBone zei:
Hetgeen ik daar zie van effecten op het menu kan perfect met behulp van xHTML en CSS nagebootst worden.

En dan dit:
http://users.skynet.be/innerchild/site/images/index_05.gif

Hoe gaat ge daar in godsnaam een tekst/inhoud van variabele lengte inkrijgen. Ik zeg het opnieuw: knip ieder hoekje apart uit en neem een stukje uit de verbindingen tussen die hoekjes zodat je die horizontaal en verticaal kan laten herhalen als achtergrond. Zodoende kan uw inhoud zo groot zijn als maar kan, uwlayout zal het effect geven van mee uit te rekken omdat ge met herhalende elementen zit tussen uw hoekjes.
Klik om te vergroten...

met alle respect...maar ik ben nog niet zo ver gevorderd dat ik in staat ben zo'n dingen te doen..guess i'll have to learn html/css first

maar moest je mij nu op weg kunnen helpen..zou ik het zeker en vast appreciëren...ik ben meer van 'al doende leert men' en wil dus mijn site online krijgen met hulp van jullie..als het al dan niet kan
I

InnerChild

Legacy Member
nice, dat moet een sticky worden :applause: (zo mensen als jij moeten er meer zijn :p)
L

LunchBox

Legacy Member
kheb een paar van m'n sites (cow, stuntpc ism met dries) gescreenshot in imageready terwijl ze reeds gesliced waren, misschien leer je'r iets uit. weet dah'k nooit iets met de 'gegenereerde html-file' aanvang dus dat impliceert dat je volledig rekening gaat houden met eigen tables of divs om het geheel terug op te bouwen wanneer je sliced.

ik maak ook vaak eerst de interface, die slice ik dan en bouw ik terug op met dxhtml+php en daarna pas screenshot ik het geheel in een browser (moet uiteraard wel precies hetzelfde zijn in iexplorer, opera, firefox dan) en begin ik pas aan de layout van de content.

soit de link: http://users.pandora.be/weblab/sliced/
(zal ooit wel's slicing-tutorial in mekaar steken maar kheb er nu ni echt tijd voor)

sommige screenshots zullen nogal onlogisch lijken voor iemand die reeds divs gebruikt, maar ik gebruikte vroeger (en dat zijn dus oudere files) enkel tables - en redelijk veel tables zelfs ma soit. als'k ooit een tutorial maak zal'k ineens de voordelen van divs proberen aantonen se. (slices waar tekst 'doorloopt' daar wordt de text-layer van uitgezet wanneer'k opsla dus die zullen geen tekst meer bevatten)

edit: darkbone is me weer voor, maar hij heeft al een tutor klaar voor jullie se - kzal er binnekort'ns op verdergaan ofzo.. good work lode!
I

InnerChild

Legacy Member
nice LunchBox...er zijn hier toch nog een paar die willen helpen..terwijl ik dacht dat (moest ik een thread starten) ze me wel naar google zouden verwijzen...dit bewijst dus het tegendeel, sommige mensen werken nog om deze community een beetje recht te houden :woohoo:

Nu, ik ga dus eerst slicen en met tables werken om zo tijdelijk men site online te krijgen, ondertussen leer ik verder aan css/xhtml en mss zelfs later php (veel later :p)
Gewoon online krijgen met content zal voor mij al een grote stap zijn :unsure:

anyway..thx all en blijf die tips posten :applause:

--- edit ---
is men 'layout' die ik hier eerder gepost heb wel eigenlijk goed? Want als die al ni goed is, moet ik heel opnieuw beginnen :) (menu is mss iets te groot)
link voor diegene die geen zin hebben om naar boven te scrollen.
D

DarkBone

Legacy Member
[qoute]is men 'layout' die ik hier eerder gepost heb wel eigenlijk goed? Want als die al ni goed is, moet ik heel opnieuw beginnen (menu is mss iets te groot)
link voor diegene die geen zin hebben om naar boven te scrollen.[/quote]
In mijn ogen mag alles een beetje kleiner geschaald worden. Menu is redelijk groot, maar zeker de randen van da kader zijn veel te groot volgens mij.

Da kader is trouwens op zich al 794px breed, als ge wilt dat men in 800*600 uw site ook deftig bekijkt moet ge er rekening me houden dat uw layout dan best niet breder is dan 780px (ommwille van scrollbar en browserranden), maar met die methode om een flexibel kader te maken moet dat lukken. Daarom dus dat ge uw borders bst wat kleiner maakt, zo is er meer plaats voor inhoud.
I

InnerChild

Legacy Member
Je hebt wel gelijk dat alles iets te groot is waarschijnlijk. Ik dacht dat tegenwoordig het merendeel al op 1024 of hoger zit.

kzal dus het proberen aanpassen, alles wat kleiner maken en zorgen dat er meer plaats is voor inhoud
khoop dat het me lukt, want rescalen ben ik niet goed in, meestal eindig ik dan in een volledig nieuw ontwerp
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan