Fatal error: Allowed memory size of bytes ******** exhausted

The problem is that WordPress needs more than the default 32 MB to upgrade to 3.0, due to the increased package size over 2.9. The good news is that there is a simple solution for this. Just ad the folowing line in the wp-config.php file:

define('WP_MEMORY_LIMIT', '256M' );

That’s it. Now enjoy the new WP :)

Related posts:

1. WordPress 2.7
2. WordPress 2.1
3. Prima mea tema pentru WordPress

1. Cautam imaginea

Primul lucru ce trebuie facut e sa deschidem imaginea pe care vrem sa o prelucram. Pentru cele mai reusite efecte de acest gen, e bine sa alegem imagini sau poze efectuate de la o inaltime ceva mai mare decat subiectul fotografiat. Eu am ales imaginea de mai jos, facuta acum 2 ani la barajul Vidraru:

. Primele efecte

Odata aleasa si deschisa imaginea imaginea, ca sa ne putem face de cap cu ea, deblocam layer-ul in care ea se afla (daca e blocat) prin dublu click pe layer si apoi “Enter”.

Alegerea gradient-ului

Urmatorul pas e sa intram in modul “Quick Mask” apasand pe tasta Q. Odata intrat in Quick Mask, selectam Gradient tool (apasand tasta G sau selectand-ul din meniul cu instrumente aflat in stanga in mod normal).
Aici trebuie avut in vedere ca gradient-ul sa fie de la negru spre alb, iar forma acestuia sa fie in functie de tipul de efect dorit. Eu am ales Reflected Gradient, insa la fel de bine se poate selecta Linear Gradient sau Radial Gradient.

Revenind la imaginea de mai sus, trasam cu mouse-ul o linie dreapta (tinand apasat tasta Shift pentru ca linia sa fie dreapta) incepand de la baza masinii (asa cum se vede in imaginea de mai jos, partea stanga) si pana undeva in partea de sus a masinii. Aceasta zona va fi practic zona in care dorim sa ne axam si unde imaginea va fi cea mai clara, restul imaginii devenind (putin mai incolo) mai neclara, dand impresia de spatialitate si de miniaturizare.

Zona rosie ne confirma faptul ca gradient-ul a fost adaugat si tot acolo, vom si vedea practic si efectul de miniaturizare.

Iesim acum din Quick Mask la fel cum am si intrat: apasand tasta Q. Vom vedea astfel ca practic, o parte din poza va fi selectata, in functie de cum a fost aplicat gradientul in Quick Mask Mode:

3. Adaugarea efectului

Pentru efectul complet de miniaturizare, acum aplicam un efect de Lens Blur (Filter>Blur>Lens Blur):

Setarile implicite furnizate de Photoshop sunt in regula si nu mai e nevoie sa faceti si alte modificari aici, decat doar daca doriti sa accentuati efectul. Apasati ok si veti vedea ca deja poza va da impresia ca reprezinta miniaturi. Insa pentru ca ea sa fie completa, vom mai adauga cateva mici efecte imaginii finale.

4. Efecte finale

Pentru a mari putin efectul de Tilt-Shift, adaugam acum putina saturatie imaginii asa cum se vede mai jos (Image>Adjustments>Hue/Saturation…):

..precum si putina luminozitate (Image>Adjustments>Bightness/Contrast), ca toate detaliile sa fie mai vizibile:

Si in ultimul rand, pentru ca imaginea sa fie mai clara si sa contina culori mai vii, ne folosim de micul efect invatat aici si anume – duplicarea layer-ului si apoi setarea acestuia ca si Soft light la Blending Mode:

5. Imaginea finala

Daca totul a decurs normal, imaginea de final ar trebui sa arate cam asa:

Concluzie

Acest efect de Tilt-Shift, este un efect usor de obtinut, dar care ofera o noua perspectiva imaginilor facute sau gasite pe internet. Cu putin noroc, el se poate obtine in mai putin de 5 minute, iar rezultatul final merita acest mic efort. Daca insa nu dorestii sa retii toti acesti pasi, e bine de stiut ca exista si un Auto Tilt-Shift Photoshop Action, adica practic poti sa obtii efectul de mai sus cu un singur click. Cum se instaleaza si cum se realizeaza asta, aflati daca dati click pe link-ul anterior, insa dezavantajul acestei metode este ca nu poti sa reglezi zona in care se doreste focalizarea efectului si in plus, action-ul face si o redimensionare a imaginii.

Daca vrei sa mai si inveti cate ceva, poate acest tutorial te va ajuta rapid sa dai un nou aspect imaginilor sau fotografiilor tale.

Bafta.

Related posts:

1. Tilt shift photography
2. Tutorial: Cum sa imbunatatesti aspectul vizual al pozelor
3. Experiment: Tilt-shift photography

]]>

Mai sus este un mic exemplu unde se poate vedea diferenta dintre o poza facuta cu un aparat foto obisnuit si aceeasi poza avand un mic efect aplicat.

Efecte layere

Pentru asta, tot ce ai de facut e sa deschizi poza in Photoshop. Daca layer-ul in care se afla este blocat, dai un dublu click pe el si apoi “Enter” pentru a debloca layer-ul. Urmatorul pas este duplicarea acestui layer ce contine poza sau imaginea ce se doreste a fi modificata (se poate obtine apasand CTR+J sau daca se trage efectiv layer-ul cu imaginea peste iconita cu “Create new layer” din fereastra cu Layers).

Avem acum 2 layere, dintre care unul este copie fidela a celuilalt. Aum tot ce mai avem de facut, e sa schimbam Blending mode-ul in Soft Light layer-ului aflat deasupra si gata, avem o poza care arata tot mai bine, parca e mai clara, iar culorile sunt mult mai vii. Optional, se poate ajusta si nivelul efectului de la Opacity, sau pentru un efect si mai pronuntat, se poate pune Blending Mode in Overlay.

Related posts:

1. Tutorial: Tilt-Shift in Photoshop

Pentru simplitate, presupunem ca avem urmatoarea structura pentru o pagina simpla:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titlu pagina</title>
</head>
<body>
<div id="container">
	<div id="header">
		<h1>Titlu site</h1>
		<p>descriere site</p>
	</div> <!-- sfarsit header -->

	<div id="continut">
       <h1>Titlu articol</h1>
	<p> acesta este continutul, iar acesta este un <a href="#">link</a>
	</div> <!-- sfarsit continut -->
</div> <!-- sfarsit container -->
</body>
</html>

Dupa cum se vede, aceasta este o structura simpla, in care am folosit un div denumit “container” in care practic voi ingloba tot continutul, iar apoi inca doua div-uri pentru partea de inceput a site-ului (header) si continut. Nu am mai inclus si partea de final sau un meniu pentru a simplifica acest tutorial. In header avem un “heading” pentru titlul site-ului si o mica descriere, iar in continut, un titlu, un paragraf cu un text si un link. Acestea sunt si elementele pe care dorim sa le formatam folosind CSS-ul. Pentru fiecare din aceste div-uri, am folosit ID-uri (click aici pentru e afla de ce).

Cea mai simpla metoda e sa definim in tag-ul “body” proprietatile textului pe care il dorim, de exemplu:

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #0066CC;
}

In acest fel insa, toate textele de pe site vor avea culoarea albastra si marimea de 16 pixeli, mai putin heading-ul h1 care va avea o marime standard, ceva mai mare. Pentru a evita acest lucru, vom formata practic fiecare text in parte. Sa spunem ca ne dorim ca textul din header sa fie scris cu Arial, heading-ul il vrem negru si scris mare, iar descrierea site-ului, o vrem sa fie ceva mai mica si scrisa cu un font gri. Pentru asta va trebui sa definim in css fiecare element, insa va trebui sa precizam si locatia elementului. Daca am defini doar un singur element h1 ca avand marimea de 20 pixeli, atunci toate heading-urile h1 din site vor avea marimea de 20 de pixeli. Daca insa definim elementul h1 din div-ul “header”, atunci toate proprietatile definite pentru el vor avea efect doar in “header”, iar asta se face asa:

#header, #header h1, #header p {
	font-family: Arial;
	margin: 0px;
}
#header h1 {
	font-size: 24px;
	color: #000000;
}
#header p {
	font-size: 16px;
	color: #CCCCCC;
}

Ce am facut mai sus? Practic i-am spus browser-ului ca fiecare text din interior-ul div-ului “header” sa fie de tip Arial. Puteam sa definesc fontul pentru fiecare element in parte, insa asta ar insemna sa scriu de cel putin doua ori acelasi lucru, fapt care mareste inutil marimea fisierului CSS.
Este indicat sa se foloseasca mai multe elemente care au proprietati comune, in acelasi loc, separate prin virgula.
Mai departe, am definit heading-ul H1 ca fiind negru si avand marimea de 24 pixeli, iar mai jos, descrierea site-ului care se afla in paragraf, ca fiind de doar 16 pixeli, de culoare gri.
Pentru ca in general atat un paragraf cat si un heading au implicit marginea ceva mai indepartata decat marginea textului efectiv, am adaugat si un “margin: 0px;” pentru a elimina distanta dintre cele doua elemente.

In acest fel am formatat elementele din header, pentru cele din paragrag, procedura fiind aceeasi, cu diferenta ca aici am definit si un link:

#continut, #continut h1, #continut p {
	font-family: Tahoma;
	margin: 0px;
}
#continut h1 {
	font-size: 20px;
	color: #990000;
}
#continut p {
	font-size: 1apx;
	color: #666666;
}
#continut a {
	font-size: 1apx;
	color: #666666;
	font-weight: bold;
	text-decoration: underline;
}

Nu o mai lungesc pentru ca pana acum v-ati dat seama ca aici fontul si culorile sunt schimbate, nu-i asa? Codul final, unde sunt adaugate toate cele de mai sus arata asa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titlu pagina</title>
<style type="text/css">
<!--
body {
	margin: 10px;
}
#header, #header h1, #header p {
	font-family: Arial;
	margin: 0px;
}
#header h1 {
	font-size: 24px;
	color: #000000;
}
#header p {
	font-size: 16px;
	color: #CCCCCC;
}

#continut, #continut h1, #continut p {
	font-family: Tahoma;
	margin: 0px;
}
#continut h1 {
	font-size: 20px;
	color: #990000;
}
#continut p {
	font-size: 1apx;
	color: #666666;
}
#continut a {
	font-size: 1apx;
	color: #666666;
	font-weight: bold;
	text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="container">
	<div id="header">
		<h1>Titlu site</h1>
		<p>descriere site</p>
	</div> <!-- sfarsit header -->

	<div id="continut">
	<h1>Titlu articol</h1>
	<p> acesta este continutul, iar acesta este un <a href="#">link</a>
	</div> <!-- sfarsit continut -->
</div> <!-- sfarsit container -->
</body>
</html>

Iar pentru a vedea rezultatul final, este suficient sa introduceti acest cod intr-un fisier html pe care sa il vizualizati in browerul vostru preferat. Retineti insa ca aici eu am inclus css-ul in fisierul html, insa aceasta practica nu este deloc recomandata. Eu am folosit-o doar pentru a vizualiza mai bine formatarea textelor din diferite zone ale unei pagini sau a unui site. Daca nu stiti inca cum se adauga fisierele CSS, click aici.

Related posts:

1. Scurt tutorial CSS – Diferenta dintre CLASS si ID
2. Scurt tutorial CSS: elementul text
3. Scurt tutorial CSS – Introducerea CSS in pagina

Sa luam exemplul de mai jos:

<!--
p {
color: #003366;
word-spacing: 10px;
letter-spacing: 10px;
text-decoration: underline;
vertical-align: baseline;
text-transform: capitalize;
text-align: right;
}
-->

Acest cod practic va controla cum se afiseaza text-ul dintr-un paragraf, adica cam tot ce se afla intre <p> si </p>. Ce face insa fiecare linie in parte:

color: #003366; - am atribuit o culoare textului.  Aceasta poate sa fie o valoare scrisa in hexa, ca in acest exemplu sau pur si simplu se poate preciza direct culoarea, de exemplu red.
word-spacing: 10px; – face exact ceea ce spune ca face. Adica mareste spatiul dintre cuvinte cu 12 pixeli. Valoarea implicita este normal, daca nu se specifica nimic.
letter-spacing: 10px; – ca si mai sus, aceasta proprietate mareste practic distanta dintre litere cu 10 pixeli sau desigur, cu cat se specifica. Aceasta valoare poate sa fie si negativa
text-decoration: underline; - si aici cred ca e destul de evident, nu? Aceasta proprietate practic ii spune textului sa fie subliniat. Mai poate lua valorile: overline, blink, line-through.
text-transform: capitalize; – transforma afisarea cu majuscula a primei litere dintr-un cuvant. Mai poate lua valorile:  uppercase si lowercase.
text-align: right; – am aliniat textul la stanga. Valoarea implicita este left, insa poate sa fie si center.

Daca e sa aplicam toate aceste proprietati unui paragraf aflat intr-un html, rezultatul ar arata asa:

Pe langa cele precizate mai sus, pentru formatarea unui text folosind CSS-ul, se mai pot utiliza si urmatoarele proprietati:

line-height – pentru a stabili distanta dintre 2 randuri de text succesive.
font-style – pentru a face textul italic.
font-size – pentru a stabili marimea fontului.
font-family – pentru a preciza ce fonturi se vor folosi.

Legat de font-family e bine de stiut ca cel putin deocamdata este indicat sa se foloseasca doar urmatoarele fonturi:

Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Courier New, Courier, monospace
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Si asta pentru ca aceste fonturi sunt prezente pe majoritatea calculatoarelor. Folosirea unui font mai special face ca pagina sa se afiseze corect doar pe calculatoarele care are instalat acel font.

In mare cam asta este, desi se mai pot spune multe despre formatarea unui text dintr-o pagina web. Promit sa revin insa cat de curand cu detalii legate de aceste aspecte (de exemplu, cum aranjam si formatam textele in zone diferite ale unui site).

Related posts:

1. Scurt tutorial CSS: formatarea textului
2. Scurt tutorial CSS: elementul body
3. Scurt tutorial CSS – sintaxa CSS