اضغط هنــــــــا لمشاهدة هذه الأنماط

لعمل حدود للصوره:

لاحظ جيدا الصوره تجد أننا نقوم بعمل دائره ونحدد نصف قطرها لعمل الحدود.

ديناميكيه الطريقه:

يمكنك أن تقوم بعمل حدود للصوره والتطبيق بالجي كويري

$("img").load(function() {
$(this).wrap(function(){
return ‘<span style="position:relative; display:inline-block; background:url(‘ + $(this).attr(‘src’) + ‘) no-repeat center center; width: ‘ + $(this).width() + ‘px; height: ‘ + $(this).height() + ‘px;" />’;
});
$(this).css("opacity","0");
});

});
</script>
[/html]

وهذا الكود سوف يخرج لينا كود html كما بالشكل التالي:

الصورة الدائريه:

عندما تكون الصوره خلفيه مثلا وتريد تنسيقها وتجميلها بالشكل المناسب وتريد جعل حدودها عباره عن دائره تقوم بتحديد نصف قطرها كما تريد انظر هذه الصوره:

كود الــ CSS :

بطاقه ستايل :

كود الـ CSS :

.card .image-wrap {
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
[/html] ]]> http://portal.fwasl.com/%d8%a3%d9%86%d9%85%d8%a7%d8%b7-%d8%a7%d9%84%d8%b5%d9%88%d8%b1-%d8%a7%d9%84%d9%85%d8%ae%d8%aa%d9%84%d9%81%d9%87-%d8%a8%d9%80css3/feed/ 0 http://portal.fwasl.com/%d8%aa%d8%a3%d8%ab%d9%8a%d8%b1-%d8%a7%d9%84%d8%b8%d9%84-%d9%88%d8%a7%d9%84%d9%86%d9%88%d8%b1-%d9%81%d9%89-%d8%b5%d9%88%d8%b1%d8%a9/ http://portal.fwasl.com/%d8%aa%d8%a3%d8%ab%d9%8a%d8%b1-%d8%a7%d9%84%d8%b8%d9%84-%d9%88%d8%a7%d9%84%d9%86%d9%88%d8%b1-%d9%81%d9%89-%d8%b5%d9%88%d8%b1%d8%a9/#comments Sun, 01 Jan 2012 15:17:07 +0000 http://www.portal.fwasl.com/?p=4757 سنتطرق اليوم إلى موضوع سهل للغاية وتأثيره فعال جدا فى خلق تصميم جديد من صورة بسيطة للغاية كل هذا فى برنامج الفوتوشوب وبأدواته المتنوعة والفريدة . ففكرة ان تحول صورة بسيطة إلى صورة بها ظل ونور ومركز للصورة شىء سهل للغاية …! ربما فى ثلاث أو أربع خطوات .

هنا سنجد الصورة الأصلية التى سأستخدمها كقاعدة لتصميمى.

تأثير الظل والنور فى صورة

كما ترى فى الصورة الاضاءة موزعة بشكل متساوى فى كل أنحاء الصورة .

للبدء… علينا نسخ الطبقة . ثم اضبط نوع الطبقة المنسوخة عند overlay . ثم علينا انشاء طبقة اعدادات جديدة solid color adjustment layer باللون الرمادى الداكن #565656 .  هذه الخطوات لخلق تأثير قوى للإضاءة فى صورتك.

تأثير الظل والنور فى صورة

والآن لنضع بعض الظلال. ولعمل هذا قم بإنشاء طبقة اعدادات خاصة بالتدريج gradient adjustment layer اللونى بهذه الاعدادات :

تأثير الظل والنور فى صورة

والآن سنضع المزيد من الاضاءة.فى طبقة جديدة فوق كل الطبقات السابقة ؛  استخدم فرشاة ناعمة بيضاء ولون فوق المكان الذى تريده مشع ومضىء أكثر، واضبط نوع الطبقة هذه عند Soft Light.

تأثير الظل والنور فى صورة

وهنا سنخلق هالة الضوء فوق الوردة بالضبط ؛ ففى طبقة جديدة بنفس الفرشاة المستخدمة مسبقا . واضبط نوع هذه الطبقة عند Overlay .

تأثير الظل والنور فى صورة

وبإستخدام مخيلتك تعالى معى لنرى كم عدد التأثيرات التى تستطيع اضافتها على صورة أو تصميم ما لتغير من اضائته ومدى ظهوره ووضوحه أمام عين المشاهد ….!