Archief - HTML: jpg als webontwerp gebruiken

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.

snippet

Legacy Member
ik hoop dat ik de juiste prefix gebruik... ik heb met photoshop een ontwerp gemaakt van hoe ik mijn website vorm wil geven. Nu heb ik dat ontwerp af maar weet ik niet hoe ik het verder moet gebruiken. Zoals je ziet zit er een navigatiebar (news, about,...) in verwerkt en ik zou willen dat alles in het donkere venster terechtkomt? Dus dat donkere venster wordt aanzien als mijn mainframe. Nu weet ik niet hoe ik dat ontwerp van die nagivatiebar effectief kan gebruiken als links. En hoe kan ik dat donkere venster instellen als een frame, of hoe moet ik tewerk gaan? ik hoop dat het wat duidelijk is...

hier is het ontwerp te vinden

Zero Grav

Legacy Member
Nice one voor de prefix alleszins. :)
Op pagina 2 stond dit: https://www.beyondgaming.be/forums

Is een uitleg over het verdelen van je design in stukken. Ik stel voor dat je dat even doorleest en dan kan je voor onduidelijke dingen nog je vraag stellen.

saiko

Legacy Member
gewoon in je psd allemaal guides trekken die je psd in vlakken verdeeld
dan deze allemaal uitknippen (crtl+shift+c) dan crtl+n dan crtl+v en dan crtl+alt+shift+f5
waar je de foto dan kan optimaliseren (je gebruikt bv voor je contentvlak alleen maar grijs = 1 kleur = gif formaat)

en dan in dreamweaver ofzo al die afbeeldingen positioneren via divs & in je css die afbeeldingen als achtergrond steken




je kan natuurlijk ook altijd slicen in imageReady...Al ben ik daar geen heftige voorstander van :) maar het is wel iets simpelder dan mijn manier
maar dan heb ik er tenminste volledige controle over :)

snippet

Legacy Member
merci voor de snelle replys, kga er direct eens werk van maken :niceone:

LunchBox

Legacy Member
saiko zei:
je kan natuurlijk ook altijd slicen in imageReady...Al ben ik daar geen heftige voorstander van :) maar het is wel iets simpelder dan mijn manier
maar dan heb ik er tenminste volledige controle over :)
misschien omdat je het niet beheerst dan, want slicen via bv. imageready is infinitly veelzijdiger // kleurtje aanpassen van een hele site > kleurlayer erover, slices aanduiden, save selected slices et voila.. terwijl jij met je reeks shortcuts elke afbeelding weer opnieuw kan gaan opslaan.

go with slicing in imageready; tip: de naam van je slice wordt de naam van je gif, kortom wil je éénenkele gif opslaan kies dan bij "save optimized as" voor gif (ipv .html) en typ gewoon wah in, hij gaat het toch opslaan als de naam van je slice en wat je intypt negeren. (kan je als een bug/nadeel zien, ma kvinnet eerder snel werken; 'qsdf is my friend')

saiko

Legacy Member
LunchBox zei:
misschien omdat je het niet beheerst dan, want slicen via bv. imageready is infinitly veelzijdiger // kleurtje aanpassen van een hele site > kleurlayer erover, slices aanduiden, save selected slices et voila.. terwijl jij met je reeks shortcuts elke afbeelding weer opnieuw kan gaan opslaan.

go with slicing in imageready; tip: de naam van je slice wordt de naam van je gif, kortom wil je éénenkele gif opslaan kies dan bij "save optimized as" voor gif (ipv .html) en typ gewoon wah in, hij gaat het toch opslaan als de naam van je slice en wat je intypt negeren. (kan je als een bug/nadeel zien, ma kvinnet eerder snel werken; 'qsdf is my friend')

mja ik beheers het zeker wel, maar ik weet niet....ik doe het liever zelf (is idd wel wat meer werk)
maar mss dat ze op school de veelzijdigheid van slicen in IR niet hebben getoont...kzal na de examens es zien wat ge der nog allemaal meek an doen :)

kunde bv dit?
als ik mijn psd indeel, dan werk ik altijd als bestandsnamen met k(i)r(i), k voor de kolom & r voor de rij & (i) voor het getal
op wa basseert IR zich voor de naamgeving?
kan ik elke slice in IR zelf al een naam geven ofzo, en dat hij deze dan gebruikt voor het exporten?

kijk eens aan...je kan me mss na een jaar overtuigen in iets wat de docenten niet hebben gekund :d :p

saiko

Legacy Member
LunchBox zei:
terwijl jij met je reeks shortcuts elke afbeelding weer opnieuw kan gaan opslaan.

mijn docente kickte daar nogthans altijd op als ik iets moest saven ;)...mijn vingers staan al heel in de positie om die export op te roepen in minder dan 2s :)

heb ik feitelijk te danken omdat ik 7 maand in het gips heb gezeten mijn mijn rechterarm & mits ik rechtshandig ben was het niet voor de hand liggend om met de muis te werken :)
dus maar van eerste keer alle shortcuts uit mijn hoofd geleerd

Mistabeen

Legacy Member
listen to LB, he's right, ook naamgeving in imageready is zoveel bete,r ge kunt totaal zelf instellen hoe ge het wilt noemen, ge kunt u slices namen geven, ge moe nie constant ander documenten openene, alles is in 1keer gesaved me dejuiste instellingen....

DieselPower

Legacy Member
da gaat toch ook met ps zelf? en dan save for web? zo doekik het toch altijd...

DarkBone

Legacy Member
DieselPower™ zei:
da gaat toch ook met ps zelf? en dan save for web? zo doekik het toch altijd...
Dan export je meteen alle images inclusief overbodige spacers enzo...
Trouwens die code die dan gegenereert wordt is barslecht, en zeker absoluut een afrader om op verder te werken.

`SeriOUs

Legacy Member
Imageready / PS(save for web) nog NOOIT gebruikt.
Je blijft dan veel te veel in tabellen denken.

Neen neen, handmatig in PS all the way. Bij elke afbeelding moet wel IETS speciaals gebeuren. (paar pixeltjes doorzichtig, px'tje croppen,...)
Ik werk op perfectie =)

Zero Grav

Legacy Member
Ik volg de manier van `SeriOUs maar denk dat dat meer persoonlijke keuze is. Op die manier heb'k meer inzicht in mijn werk.

Veel mensen zullen me ook voor gek verklaren dat ik altijd pas crop op't moment da'k dat bepaald element nodig heb, 'k ga dus niet voordien alles uitsnijden maar wacht tot ik daar zit in mijn xhtml bestand en ga dan pas dat stuk croppen. ^^

LunchBox

Legacy Member
croppen op'n interface psd is zowieso idioot, dan moet uw pc (kweet het ge hebt allemaal mega systemen) alle layers gaan croppen.. (bewijs is eenvoudig te leveren, als je cropped is de beeldinformatie buiten beeld verloren, move maar'ns een layer die tot over de rand ging)
--
shift-ctrl-c (copy merged) > ctrl-n > ctrl-v en opslaan is dan toch'n beter systeem als je persé tegen slicen bent.

__
en afbeeldingen waar zaken moeten geedit worden die pas je nadien gewoon aan, als je via slices opslaat naar gif heb je't maar te openen in photoshop (zelfde als uw gecroppe versie dus) en je kan rechtstreeks transparant maken. ctrl-s en't is weer gebakken.. soit ieder z'n werkmethode zeker, ben er nochthans van overtuigd dah'k iedereen hier kan overtuigen van de kracht van imageready moest'k ooit is een workshopke geven. (wat er nooit van ga komen ma bon)

Je blijft dan veel te veel in tabellen denken.
is me'n raadsel wat je hiermee bedoelt, maar webdesign = in rechhoeken denken, misschien zie jij het onrechtstreeks als tabellen maar slicen imageready en tabellen hebben niets met mekaar te maken.. zoals reeds gezegd > save for web > 'sliced.html' > shift-delete die file (de gegenereerde output) en bouw uw ding terug volledig van scratch op.
--
--
misschien is't trouwens opportuun dah'k even de 2 naast mekaar leg:

A CROPPING IN PHOTOSHOP:
- je hebt een interface met verschillende layers
- je schakelt de layers die je niet nodig hebt voor een bepaalde image uit
- je trekt een selectie
- je cropped een heel bestand naar de grootte van die selectie
- je slaat het bestand op naar gif/jpg/png (naam ingeven of img aanduiden & overschrijven)
- je gaat terug in het history venster tot voor je gecropped hebt
> REPEAT HERE

B SLICING IN IMAGEREADY
- je hebt een interface met verschillende layers
- je doet voorbereidend werk en slaat layer-composities op naargelang de beeldinformatie (layers) die je nodig hebt voor een bepaalde image
- je trekt een selectie > je convert de selectie naar een slice > je geeft de slice een naam in de slice-dialog
> REPEAT HERE
- je selecteert slices die je wilt opslaan en kiest voor "save for web" (save selected slices / user slices only)
- voor aangepaste afbeeldingen selecteer je de correcte layer compositie en doet hetzelfde als in de stap hierboven, de afbeelding wordt overschreven met de nieuwe en de slice heeft automatisch zijn naam gekregen

--
needless to say dat als je met éénenkel bestand zit waar alle regio's mooi zijn aangeduidt en je op 1-2-3 aanpassingen kan toepassen (zonder met overlap van afbeeldingen "te kunnen zitten") dit sneller werkt dan wanneer je koppig wil volhouden aan oude gewoontes en je nergens een centraal bestand overhoudt met wat er tussen "interface"-fase en "afbeelding"-fase is gebeurd.

>> wil je nu trouwens iets aanpassen en "boven" een bepaalde afbeelding plaatsen dan heb je deze twee situaties:

A CROPPING IN PHOTOSHOP
- je opent de gecropte afbeelding (.gif/.png/.jpg)
- je wilt de aanpassing opslaan dus opent de volledige psd
- je plakt de gecropte versie in de psd omdat je terug wil opslaan naar die dimensies
- je mikt de layer naar zijn locatie
- je zet de blending mode op multiply (of eender welke andere blendingmode)
- je corrigeert de positie
- je stelt de blending mode terug in op normal
- je plaatst een nieuwe layer boven de voorgaande en plaatst er de nieuwe informatie bij
- je ctrl-selecteert de layer met de geimporteerde gecropte afbeelding (om die dimensies terug te hebben)
- je cropped een heel bestand naar de grootte van die selectie
- je slaat het bestand op naar gif/jpg/png (naam ingeven of img aanduiden & overschrijven)
- je gaat terug in het history venster tot voor je gecropped hebt en slaat de wijzigingen op in de psd

B SLICING IN IMAGEREADY
- je plaatst een nieuwe layer boven de voorgaande en plaatst er de nieuwe informatie bij
- je selecteert slices die je wilt opslaan en kiest voor "save for web" (save selected slices / user slices only) > de afbeelding wordt overschreven met de nieuwe en de slice heeft automatisch zijn naam gekregen
- je slaat de wijzigingen op in de psd

wie zijn werkwijze herkent in A mag misschien toch eens overtuigd gaan geraken dat die van B je tijd en moeite kan besparen.

@darkbone hieronder: idd bijkomend nadeel van croppen, je kan wel je layerstyle rasterizen, maar dan ben je de informatie van de layerstyle kwijt (bijkomend nadeel dus) // een slice slaat op wat hij ziet, zet je de layer erboven op heb je'n afbeelding met; zet je de layer af heb je ééntje zonder >> voor rollovers heb je dus enkel de slice-naam (slice_hover, slice_normal) te wijzigen, een layer aan/uit te vinken en 2x afzonderlijk save for web te doen.

you people are missing out on something great and versatile :)

DarkBone

Legacy Member
Aangezien bij een crop idd alle omliggende info wordt verwijderd, komt ge voor rare effecten te staan met 'Layer Styles' bij bijvoorbeeld een Inner Glow.

Voorbeeld: teken een rechthoek, geef 'm een inner glow, crop ergens halverwege, en uw inner glow 'verspringt mee', terwijl uw intentie misschien was dat er aan een bepaalde zijde geen inner glow meer zou zijn.

Zero Grav

Legacy Member
Ja, wat gij zegt heb'k al vaak meegemaakt darkbone. Mja, lost ge dan op via bepaalde omwegen..
Zoals bv een losless kopietje maken van je bestand.

you people are missing out on something great and versatile

Iedereen zijn eigen manier van werken though.

croppen op'n interface psd is zowieso idioot, dan moet uw pc (kweet het ge hebt allemaal mega systemen) alle layers gaan croppen.. (bewijs is eenvoudig te leveren, als je cropped is de beeldinformatie buiten beeld verloren, move maar'ns een layer die tot over de rand ging)

Ge hebt zelf uw history tablet altijd open staan. You should know better.

LunchBox

Legacy Member
Iedereen zijn eigen manier van werken though.
het sleutelwoord zero_grav: 'koppigheid' (en'k wil niets opdringen he, maar een vergelijking met een aantoonbaar positiever resultaat negeren, persoonlijk denk ik dan.. mja soit doet er niet toe wat ik dan denk)

het gaat niet om de history, idd kheb die altijd openstaan omdah'k wil weten tot waar ik terug kan en geregeld tussen stappen opsla (zodat je niet met een 'reverted'-document zit wanneer je boven de undo-buffer zit) maar dus om het feit dat je een 'bombastisch document' gaat croppen terwijl je beter dat kleine deeltje er even uithaalt en in een nieuw document plakt. (dat automatisch de dimensies van je plakboek bevat)

IN COMES ANOTHER TIP
verder is het niet altijd even handig van je guides ge gebruiken voor je slices, aangezien je over't algemeen veel meer guidelines hebt dan slice-borders.. een methode die ik toepas is de volgende: (design door dries schaballie)
__
- voeg een nieuwe layer toe en selecteer regio's, vul deze regio's op met een kleurtje (geen 2 'naast mekaar liggende vlakken' eenzelfde kleur geven) het voordeel is dat je ziet waar je pixels vergeten aan te duiden bent:
http://www.showme.be/stefanequoia/methods/slicing/appointingregions.gif

- bijkomend voordeel is dat je een overzicht krijgt van waar je eventueel tiling kan gaan toepassen, de 1px hoge/brede oranje vlakken zijn tiling-regions en worden dus naar een gif van die dimensie opgeslaan. spreekt voor zich dat hoe meer beeldinformatie je kan tilen hoe beter geoptimaliseerd je site zal zijn: (onderstaande afbeelding wordt op een site een gif van 331bytes [!])
http://www.showme.be/stefanequoia/methods/slicing/bgtiling.gif

- en vanaf hier gaat het snel; kleurtje aanduiden via magic wand > create slice from selection > slice een naam geven en dit voor alle slices doen en save for web // wil je nu andere tekst op de andere buttons (home/headlines) heb je maar die tekst aan te passen, de slice te hernoemen naar bv. RgtItemTitle_ietsanders, save for web et voila:
http://www.showme.be/stefanequoia/methods/slicing/selectandname.gif
__

enfin misschien dat we al'n paar mensen kunnen overtuigen he, dan ben'k immers al content.. de rest volgt veel later nog wel - mark my words :music:

ps: zero_grav, uw werkwijze ivm layer styles voor gradients/pixelborder op een vectorieel vlak heeft mijn photoshop-ervaring verandert (en bespaart me nu veel tijd).. dunno of'k u dah al gezegd heb. (ge moet me daarom ni de "favour" returnen maar ge kunt soms wah van mekaar leren // i even learned a valuable thing from you)

Zero Grav

Legacy Member
Mja, 'k heb ook al wel veel van u geleerd natuurlijk en 'k ga morgenavond deze thread nog eens goed overlezen want 'k ben eigenlijk half aan't lezen en half voor examens aan't studeren.

Maar.. sommige dingen liggen u gewoon beter, dat gedoe met imageready en al heb'k nooit echt graag gehad, al moet ik toegeven dat ik me er nooit echt in heb verdiept ook ni natuurlijk. Zat gewoon altijd te vloeken dat adobe de rounded rectangle selectie niet in ps gestoken heeft..

En die pixel borders.. is wel grappig, ik had da net zitten proberen op uw manier ma da mislukte met tijden zo half. :D

`SeriOUs

Legacy Member
Ik zal het programma eens gebruiken bij mijn volgend ontwerpje. Kijken of ik met mijn werkwijzes tijd win. :)
Want tot nu toe heb ik het idd niet gebruikt omwille van koppigheid... veel te veel instellen voor zulke prullaria.

We shall see. :)

vempire

Legacy Member
Probeer div's te vermijden zou ik zeggen:) Ikzelf eb daar niets dan problemen mee maar dit is simpel te doen door te slicen in ps, vervolgens ja afbeeldingen in tabellen zetten en je content includen.
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