Adobe Photoshop, Elements, Illustrator en verwerking van afbeeldingen

Heeft u een website? Dan heeft u te maken met afbeeldingen die aangepast moeten worden. Dat betreft het logo, de icons, de bullets, de buttons, de strepen en wat al niet meer. Natuurlijk kan het verstandig zijn dit aan de webdesigner over te laten maar het is zeker zo handig om zelf de basis te kennen. Want: met deze basis kunt u zelf mogelijk 90% van de aanpassingen doen en zo zelf een creatieve bijdrage leveren aan uw eigen website. Binnen het blog van dewebmeester.nl (www.dewebhulp.nl) dan ook (wat) aandacht voor Photoshop, Illustrator en andere programma’s waarmee afbeeldingen kunnen worden aangepast.

Van uitgebreide afbeelding (30mb) naar een simpele icon (10kb)
Ja leuk toch? U heeft een mooie afbeelding en u wilt een heel piepklein stukje van die afbeelding gebruiken als icon of als button.
Openen afbeeldingen in Photoshop Elements (voldoende).

Omzetten van afbeelding in laag/layer (of de afbeelding wordt al weergegeven als laag/layer).
“Retangular Margue Tool” (selecteer tool) selecteert u het stukje uit de grote afbeelding dat gebruikt moet worden.

Rechtermuis,layer via copy, en zo hebben we ineens 2 lagen.
De originele laag verwijderen we en houden we alleen de laag over waar we wat mee willen doen.
De kleine afbeelding en achtergrond kunnen we nu makkelijk aanpassen (transparant maken of kleuren of objecten verwijderen).

Als afbeelding klaar is, opnieuw de “Retangular Margue Tool” (selecteer tool) en als we de afbeelding geselecteerd hebben, klikken op “image” en dan “crop” en nu zijn we klaar.
O nee, we moeten de afbeelding nog opslaan in juiste format (.jpg of .png) om binnen de website te kunnen gebruiken.

Ik hoop snel tijd te vinden om nog wat tips en ideeen op te schrijven in dit blog.
Groeten!
Meindert A. Jorna namens info)

 

Related articles

• Adobe Photoshop Elements 11 for Only $49.99! (saveabuckpdx.typepad.com)
• How To Create Vibrant Color Photographs (abeautifulmess.com)
• Get Pixelmator 2.1 image-editing app (Mac) for $15 (reviews.cnet.com)
• Learn to add handwriting to your photos! (abeautifulmess.typepad.com)
• How To Make Product Collages For Your Blog (abeautifulmess.com)

Testen website voor wide screen en aanpassen achtergrond afbeelding

Bij het maken van een website moet de website getest worden in meerdere browsers maar ook binnen meerdere schermresoluties. Nu heeft de ontwikkelaar niet altijd de beschikking over een rij computers of monitoren en dat is natuurlijk ook geen makkelijk optie. Wat betreft het testen binnen verschillende monitoren zijn de volgende mogelijkheden beschikbaar:

1. Firefox addon “Firesizer”: Niet handig omdat de computer monitor een limiet heeft (bijvoorbeeld 1280px) en testen in widescreen daarmee onmogelijk is.
2. De webdeveloper extensie “resize” van Firefox: zelfde probleem als onder 1
3. De Ctrl + en Ctrl – knoppen: simpele en meest effectieve optie wat mij betreft. Zo vergroot ik de monitor weergave niet maar verklein ik de website weergave en daardoor krijg ik de website toch te zien zoals hij op een wide screen getoond wordt.

Vervolgens kan ik de grootte van de background image aanpassen en testen. Natuurlijk wil ik een dynamische grootte. Oftewel: grootte wordt gepaald door de monitor waarmee de bezoeker de website bezoekt. Achtergrond afbeelding moet getoond worden over hele scherm. Of dit scherm nu 800px x 600px of 2400px breed is. Uitgangspunt is gebruikte css. De nieuwe standaard laat volgende code toe:

background-size: cover;

Maar helaas, als ik die vermelding plaats binnen huidige css file dan werkt dat niet. Wat wel werkt:
Website openen in Firefox en element inspecteren met Firebug. [background-size: cover;] toevoegen aan css binnen Firefox en resultaat bekijken via Ctrl+. Als het goed is werkt het nu wel. Vervolgens kopieer is de gehele achtergrond vermelding naar de vermelding binnen originele css file:

#footer {
background-attachment: scroll;
background-clip: border-box;
background-color: #0A546B;
background-image: url(“../images/footer.jpg”);
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
clear: both;
color: #FFFFFF;
margin: -50px 0 0;
min-width: 1200px;
overflow: hidden;
padding: 80px 0 0}

Firefox heeft de hele achtergrond / background css vermeldingen voor de positie #footer aangepast aan de browserstandaard en daarmee is volgens mij Firefox / Firebug de beste (en gratis) html editor die er bestaat. Toch?
Wilt u de layout van uw website laten aanpassen? dewebmeester.nl rekent per “tweak” 10 Euro maar soms kunt u gebruik maken van speciale acties waardoor “tweaks” te koop zijn vanaf 5 Euro. Volg dewebmeester.nl om op de hoogte te blijven:

Ir. Meindert A. Jorna (Msc.)

Savornin Lohmanstraat 45

6702BN Wageningen

☎ 0317 795149

Mob. 06 412 86716

☒ info: www.dewebmeester.nl

My profiles: Facebook LinkedIn Flickr Twitter

Aanpassen layout Joomla module

Het aanpassen van de layout van een Joomla module lijkt een eenvoudige zaak met Firebug. Maar bij aanpassen van de css file behorende bij de module, is de kans groot dat ook de layout van andere modules aangepast worden terwijl dat mogelijk niet te bedoeling is. Dat is zeker het geval als de css verwijzingen verstopt zitten in bijvoorbeeld een style.css file of template.css file. Als de module een eigen css file heeft, dan is het inderdaad niet moeilijk om de layout aan te passen.

De makkelijkste manier
Het makkelijkste lijkt mij op dit moment om in “advanced options” binnen modulebeheer (binnen Joomla administrator) de “Module Class Suffix” aan te passen.
Dat gaat als volgt:
Ga naar modulebeheer in Joomla en open de module waarvoor de layout aangepast moet worden.
Open de stylesheet waarnaar deze module verwijst (via Filezilla en Notepad+)
Kijk via Firebug welke layout verwijzing aangepast moet worden
Ga terug naar de geopende stylesheet (css file) en zoek via “search” naar de verwijzing
Kopieer de div class en plaats die daar direct onder; Bijvoorbeeld:

#footer .moduletable h3.mod-title {
color: #800040;}

#footer .moduletable h3.mod-title {
color: #800040;}

Nu passen we de tweede verwijzing aan en maken een nieuwe div class. Bijvoorbeeld:

#footer .moduletable h3.mod-title {
color: #800040;}

#footer .moduletable2 h3.mod-title {
color: #FFFFFF;}

We schakelen weer terug naar de geopende module in modulebeheer en plaatsen aan de rechterkant onder “advanced options” in de “Module Class Suffix” de div class: moduletable2 en slaan de module op. Zie afbeelding:

Resultaat is dat de header van de bewuste module een h3 grootte hebben (dat hadden ze al) en dat de kleur is veranderd naar wit. Nu is het makkelijk om voor elke module de header aan te passen in wit.
Tot zover. Wilt u ook de layout van uw Joomla website laten aanpassen? Vraag info@dewebmeester.nl naar mogelijkheden.
Groeten!