PDA

View Full Version : • قهوه خانه طراحان وبسایت •



salehbagheri
جمعه 17 اردیبهشت 1389, 00:06 صبح
این تاپیک میتونه شامل هرچیزی که خوندنش، دیدنش، شنیدنش مفید هست باشه!

-------------------------------------------------------------------------------------
نکته 1: لطفاً حتماً قوانین سایت، تالار و عرف رو رعایت کنید.
نکته 2: همگی دوست داریم مطالبی جذاب، مفید و آموزنده داشته باشیم
نکته 3: شاد باشید :لبخند: :قلب:
نکته 4: مطالب اين تاپيك مرتبط با UserInterface هست و هيچ ارتباطي با Coding ندارد!
-------------------------------------------------------------------------------------
قابل توجه طراحان وب سایت

تاحالا این سایت (http://www.v5design.com/) رو دیدید؟

salehbagheri
جمعه 17 اردیبهشت 1389, 00:29 صبح
اینکه همش فلشه ! نکته قابل توجی نداره

نمیدونم چرا دوستان سعی نمیکنند کمی متفکرانه با موضوع روبرو بشند!
------------------------------------------------------------------------------
امروزه در طراحی وبسایت تقریباً 50 درصد کار طراحی صرف ایجاد یک UI مناسب میشه اما هیچ کس به این موضوع اهمیتی نمیده در حالی که کاربران سایت (که اهداف اصلی وبسایت هستند) تقریباً 99 درصد با UI سروکار دارند نه با کدهای شما !
پس بنابراین لازم میدونم در این عرصه (UI) با شما همکاری کنم.
-----------------------------------------------------------------------------
یکی از Text Effect هایی که امروزه واسه عنوان سایتها، لوگوها و ... مد شده حالت Inset Typography هست!

http://images.sixrevisions.com/2009/09/22-01_inset_typography_lead_image.jpg

اگه بلد نیستی بسازی برو اینجا (http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-inset-typography-in-photoshop/)

salehbagheri
جمعه 17 اردیبهشت 1389, 00:55 صبح
جی کوئری دوستان اینجا رو از دست ندند!

نمونه های انیمیشنی با jQuery !
http://webdesignledger.com/tutorials/13-excellent-jquery-animation-techniques

مثلا یکی از نمونه هاش این منوی زیباست!
http://nettuts.s3.amazonaws.com/004_Moo/tutorial/demo/demo.html

Amir Oveisi
جمعه 17 اردیبهشت 1389, 01:27 صبح
این چجور زنگ تفریحیه؟ :لبخند:

FastCode
جمعه 17 اردیبهشت 1389, 03:13 صبح
این چجور زنگ تفریحیه؟ :لبخند:
راست میگی.
به نظر من بیشتر شبیه زنگ های اضافست که مدیرا باهاش بچه ها رو دیونده میکنن.:شیطان:

Dr.Bronx
جمعه 17 اردیبهشت 1389, 09:35 صبح
تاپیک جالبیه . ادامه بدید .

یک سایتی رو قدیما می رفتم میشد انوع کلید ها رو ساخت و بعد با فرمت .png تحویل میداد
اگر پیدا کردم اینجا می زارم حتما .

ممنون از زحمات شما جناب salehbagheri

موفق و موید باشید ./

salehbagheri
جمعه 17 اردیبهشت 1389, 11:25 صبح
دوستان عزیزی که میخوان بنرها، منوها و دکمه های متحرک فلش داشته باشند این سایت خوراکشون هست!
http://www.flashvortex.com/

توضیحات:

No signup needed
No software to install
No design skill required

Rejnev
جمعه 17 اردیبهشت 1389, 11:52 صبح
نظر من:
برای طراحی یک وبسایت که با هر رزولوشنی کار کنه و زیبایی داشته باشه بهتر طرح وبسات رو در فتوشاپ ایجاد کنید. سپس از قسمتهای مختلف اون تصویر برش زده و با استفاده از css در پس زمینه عناصر قرار دهید و تنظیمات مربوطه رو هم باید با همین css انجام بدید که تصویر بهم نخوره.
نمونش:http://www.microsoft.com/visualstudio/en-us/

salehbagheri
جمعه 17 اردیبهشت 1389, 13:23 عصر
برای طراحی یک وبسایت که با هر رزولوشنی کار کنه و زیبایی داشته باشه بهتر طرح وبسات رو در فتوشاپ ایجاد کنید. سپس از قسمتهای مختلف اون تصویر برش زده و با استفاده از css در پس زمینه عناصر قرار دهید و تنظیمات مربوطه رو هم باید با همین css انجام بدید که تصویر بهم نخوره.

در ادامه صحبتهای شما:

دوستان میتونند با استفاده از آموزشهای زیر یک طرح فتوشاپ رو به کدهای HTML و CSS یا یک صفحه وب تبدیل کنند!
http://line25.com/tutorials/how-to-code-up-a-web-design-from-psd-to-html

این یکی اول طرح رو در فتوشاپ ایجاد کرده و سپس ...
http://sixrevisions.com/tutorials/photoshop-tutorials/create-a-clean-and-professional-web-design-in-photoshop/
http://sixrevisions.com/tutorials/web-development-tutorials/code-clean-professional-web-design/

salehbagheri
جمعه 17 اردیبهشت 1389, 13:47 عصر
یکی از چیزهایی که در طراحی های مدرن بنرها و تصاویر تبلیغاتی برای سایت مورد استفاده اکثر طراحان قرار میگیره طرحهای Abstract یا Floral هست که به شدت بهشون علاقه دارم.

میتونید با استفاده از این طرحها بیننده های بیشتر رو جذب کنید!

http://up.iranblog.com/Files/a3f2dcd8b3e34729a83b.jpg
http://up.iranblog.com/Files/4212a4a71d144e41a131.jpg
http://up.iranblog.com/Files/ed64ba827c8c445ca254.jpg

دانلود چند نمونه:
http://10steps.sg/wp-content/uploads/photo25/0.jpg (http://qbrushes.net/plants/suddenly-spring/)

salehbagheri
جمعه 17 اردیبهشت 1389, 14:26 عصر
بفرمایید قند (http://button-download.com/) !!!



میدونید چه جوری با Css3 میشه دکمه های Gradient ساخت؟ Goooo (http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/)

http://www.webdesignerwall.com/wp-content/uploads/2010/04/button-preview.jpg

منوهای Gradient چطور؟ Goooo (http://www.webdesignerwall.com/demo/css3-dropdown-menu/css-gradient-dropdown.html)

http://www.webdesignerwall.com/wp-content/uploads/2010/04/css-gradient-dropdown-menu.gif

salehbagheri
جمعه 17 اردیبهشت 1389, 14:44 عصر
Free Css Template


http://www.visual-blast.com/wp-content/uploads/2009/12/templatemoo_free_css_templates.jpg (http://www.templatemo.com/page/1)

نمونه های خوبی داره واسه دوستانی که در Assemble کردن مشکل دارند!

RFA.AREF
جمعه 17 اردیبهشت 1389, 14:48 عصر
اینجا می تونین آموزش طراحی سایت سه بعدی رو ببینین با فتوشاپ
http://www.ittutorial.ir/?p=2843
کلا توی سایت ittutorial چیزای خوبی پیدا می شه


این هم آموزش طراحی گوی شیشه ای در فتوشاپ
http://persiangfx.com/fa/tutorials/photoshop/interface-design/design-orb-in-photoshop/#more

و دانلود چند مجموعه از تصاویر اسلیمی
http://persiangfx.com/fa/design-tools/eslimi/

قاب و حاشیه
http://persiangfx.com/fa/design-tools/frame/

بچه ها زنگ خورد بریم سر کلاس

salehbagheri
جمعه 17 اردیبهشت 1389, 14:52 عصر
گالری انمیشنی ندارید؟ دنبالشید؟

http://koflash.flashmo.netdna-cdn.com/images/flashxml_270x270.jpg (http://www.flashxml.net/)

Hossein Bazyan
جمعه 17 اردیبهشت 1389, 22:49 عصر
یکی از چیزهایی که در طراحی های مدرن بنرها و تصاویر تبلیغاتی برای سایت مورد استفاده اکثر طراحان قرار میگیره طرحهای Abstract یا Floral هست که به شدت بهشون علاقه دارم.

میتونید با استفاده از این طرحها بیننده های بیشتر رو جذب کنید!

http://up.iranblog.com/Files/a3f2dcd8b3e34729a83b.jpg
http://up.iranblog.com/Files/4212a4a71d144e41a131.jpg
http://up.iranblog.com/Files/ed64ba827c8c445ca254.jpg

دانلود چند نمونه:
http://10steps.sg/wp-content/uploads/photo25/0.jpg (http://qbrushes.net/plants/suddenly-spring/)

سلام
اینا که پولی هستند!

salehbagheri
جمعه 17 اردیبهشت 1389, 23:37 عصر
سلام
اینا که پولی هستند!

لينك «دانلود» خجالت زده شد! :بامزه: :لبخند:

http://barnamenevis.org/forum/attachment.php?attachmentid=48613&stc=1&d=1273260825

دقت كنيد كه اين لينك در واقع brush براي فتوشاپ هست!
وكتورهايي از اين نوع نيز وجود دارد كه با جستجوي عناوين « Floral , Vector , Abstract, ... » در گوگل، ميتونيد به اونها دست پيدا كنيد.

salehbagheri
شنبه 18 اردیبهشت 1389, 00:26 صبح
بيش از 30 آيكون از رسانه هاي اجتماعي !

http://medialoot.com/images/thumbs/510x0_social-media-icon-set-updated.jpg (http://medialoot.com/item/30-new-social-media-icons/)


به دنيايي از آيكون نيز بد نيست سر بزنيد! اكثراً (تقريباً همگي) رايگان هستند!
http://www.iconshock.com/icon_sets/

salehbagheri
شنبه 18 اردیبهشت 1389, 01:11 صبح
اينهم چند نمونه Plugin جي كوئري:


BubbleUp (http://aext.net/2010/04/bubbleup-jquery-plugin/)
jQuery Quicksand Plugin (http://razorjack.net/quicksand/)
jqFancyTransitions: jQuery Image Rotator Plugin (http://workshop.rs/projects/jqfancytransitions/)
jQuery Captify Plugin (http://thirdroute.com/projects/captify/)
TipTip jQuery Plugin (http://code.drewwilson.com/entry/tiptip-jquery-plugin)

salehbagheri
شنبه 18 اردیبهشت 1389, 19:38 عصر
چند نمونه Brush مخصوص طراحي Header سايت يا Banner هاي تبليغاتي ميذارم كه استفاده كنيد!

امواج، Fractal، Curves و ...
http://getbrushes.com/brush-images/preview.jpg (http://getbrushes.com/fractal-photoshop-brushes/bx228-fractal-brushes.php)

http://getbrushes.com/brush-images/em_e_chan_fractal_brushes.jpg (http://getbrushes.com/fractal-photoshop-brushes/em-e-chans-fractal-brushes.php)

http://getbrushes.com/brush-images/ihea_vector_curve_brushes.jpg (http://getbrushes.com/vector-photoshop-brushes/ihea-vector-curves-brushes.php)

اينم يه Brush فوق العاده ! Glitter
http://www.obsidiandawn.com/wp-content/images/brushes/glitter-brushes.jpg (http://www.obsidiandawn.com/glitter-photoshop-gimp-brushes)

اين يكي رو ديگه همه ديدند ....
http://getbrushes.com/brush-images/fixedys_vector_brushes1.jpg (http://getbrushes.com/vector-photoshop-brushes/fixedys-vector-brushes-part-1.php)

salehbagheri
شنبه 18 اردیبهشت 1389, 19:43 عصر
با اين Style ها ميتونيد به راحتي عناصر وبسايت خودتون رو به صورت حرفه اي تزيين كنيد!

http://www.dezinerfolio.com/sites/default/files/lstyles.jpg (http://www.dezinerfolio.com/2007/05/06/ultimate-web-20-layer-styles/)

اينم چندنمونه فوق العاده از Gradient ها (تحت ليسانس روانشناسي رنگ :قهقهه:) :

http://www.dezinerfolio.com/sites/default/files/gradients.jpg (http://www.dezinerfolio.com/2007/05/03/ultimate-web-20-gradients-v30-release)

Dr.Bronx
شنبه 18 اردیبهشت 1389, 19:51 عصر
ساخت وبسایت فلش بصورت رایگان

http://www.wix.com/start/wfree?utm_campaign=w3&experiment_id=w300


Free xhtml/css templates
for WEB DESIGN

http://www.templateworld.com/freetemplates/images/ftbanner-01.gif

http://www.templateworld.com/free_templates_1_10_4.html

sahele_sheni
سه شنبه 28 اردیبهشت 1389, 19:32 عصر
تاپیک فوق العاده ای بود آقای باقری در صورت امکن ادامه بدید . ممنون از زحمات بی دریغتون

shirin_sh1024
سه شنبه 28 اردیبهشت 1389, 21:06 عصر
عالی بود
حیف که من هنوز درگیر کدنویسی ام ولی رو کدنویسی مسلط بشم حتما تو زمینه گرافیک هم کار می کنم . باهاتون موافقم کاربرا با کد برنامه کاری ندارند و وقتی UI مناسبی داشته باشی تاثیر خیلی زیادی روی کاربرا میزاره.
خیلی زیبا بود.

salehbagheri
چهارشنبه 29 اردیبهشت 1389, 12:24 عصر
سلام دوستان!

امروز يه Template از سايت خودم ساخته خودم رو ميزارم اينجا استفاده كنيد ...

البته چند نمونه Plugin آماده jQuery هم توش استفاده كردم ...

همچنين بخاطر به كارگرفتن از تصاوير كيفيت بالا كمي سنگين شده كه بعداً درستش ميكنم
http://barnamenevis.org/forum/attachment.php?attachmentid=49243&stc=1&d=1274257449

از اينجا دانلود كنيد:
http://www.myprojectdev.net/myprojectdev.zip

salehbagheri
چهارشنبه 29 اردیبهشت 1389, 13:05 عصر
تاحالا به اين فكر كرديد كه چه جوري ميشه از يك تصوير طوري در سايت استفاده كرد كه بيشترين بازده رو داشته باشه؟ يا مثلاً از يك تصوير بي ربط به گونه اين استفاده كنيد كه بيشترين جذابيت رو ايجاد كنه؟

به اين نمونه ها دقت كنيد:
http://sixrevisions.com/design-showcase-inspiration/using-photos-web-design/

salehbagheri
چهارشنبه 29 اردیبهشت 1389, 13:07 عصر
رنگ چيست؟

روانشناسي رنگ چيست؟

سايتم چه رنگي باشه تا بيشترين بازده رو داشته باشه؟

http://psychology.about.com/od/sensationandperception/a/colorpsych.htm
http://sixrevisions.com/design-showcase-inspiration/7-deadly-sins-represented-with-web-design-colors/

salehbagheri
یک شنبه 09 خرداد 1389, 13:37 عصر
حداكثر قيمتي كه براي ساخت يك وبسايت به ذهنتون ميرسه چقدره؟

حالا حداكثر قيمتي كه براي ساخت ظاهر يك وبسايت به ذهنتون ميرسه چقدره؟

لينك زير رو ببينيد: فقط قيمت پايه يك Template نسبتاً ساده هست:

http://www.dreamtemplate.com/templates/Dynamic_XHTML_-_3D_CU3ER/detail/6669.html

اميدوارم دوستان كم كم ارزش كارشون رو ببرن بالا !

/_/_/_/_/_/_/_
/_/_/_/_/_/_/_

اينم يه الگوي بسيار زيبا كه من عاشقشم:
قيمت: 2365 دلار
http://www.dreamtemplate.com/templates/Abstract/detail/5365.html

salehbagheri
یک شنبه 09 خرداد 1389, 13:46 عصر
اينهم نحوه ساخت يه LightBox با استفاده از CSS ! (http://sixrevisions.com/css/semantic-css3-lightboxes/)

40 پس زمينه با كيفيت بسيار عالي:
http://customize.org/thumbnails/medium/75099.jpg (http://sixrevisions.com/resources/40-beautiful-and-very-high-resolution-wallpapers/)

salehbagheri
یک شنبه 09 خرداد 1389, 13:48 عصر
يكي از مواردي كه خيلي اهميت داره ولي معمولاً در طراحي جا مي افته، طراحي يك Footer زيباست!

به اين footer ها نگاه كنيد! (http://sixrevisions.com/design-showcase-inspiration/beautiful-footers-in-modern-web-design-for-inspiration/)

salehbagheri
پنج شنبه 13 خرداد 1389, 20:47 عصر
امروز يه چيزي ديدم كه دلم نيومد واستون نذارمش!

به اين ميگن قدرت فلش:
http://images.sixrevisions.com/2010/05/15-19_comcasttown.jpg (http://www.comcasttown.com/)

به قول يكي از دوستان: اگه نبيني نصف عمرت بر فناست!

Rejnev
پنج شنبه 13 خرداد 1389, 20:54 عصر
بهتر نیست این تاپیک به بخش طراحی وب منتقل بشه؟
after reading, please delete this

salehbagheri
پنج شنبه 13 خرداد 1389, 20:57 عصر
بهتر نیست این تاپیک به بخش طراحی وب منتقل بشه؟

نه عزيز! چون ربطي به اونجا نداره!

موضوع اين تاپيك UI و Creative Design در Web هست! بخش خاصي واسش نداريم.

salehbagheri
جمعه 14 خرداد 1389, 21:37 عصر
مجموعه بي نظير هزاران Custom Shapes ! (انسانها، حيوانات، اشيا، گياهان و ...)
http://media.smashingmagazine.com/cdn_smash/images/photoshop-custom-shapes/costumes.jpg (http://www.smashingmagazine.com/2008/12/11/the-ultimate-collection-of-photoshop-custom-shapes/)

salehbagheri
جمعه 14 خرداد 1389, 21:45 عصر
الگوهاي پس زمينه صفحات وب

http://media.smashingmagazine.com/cdn_smash/images/free-photoshop-patterns/bgpat.jpg (http://bgpatterns.com/)

http://media.smashingmagazine.com/cdn_smash/images/free-photoshop-patterns/stripegen.jpg (http://www.stripegenerator.com/)

http://media.smashingmagazine.com/cdn_smash/images/free-photoshop-patterns/different.jpg (http://www.brusheezy.com/patterns/1439-Different-Pattern)

salehbagheri
جمعه 14 خرداد 1389, 23:14 عصر
به صورت آنلاين وب سايت فلش بسازيد... (http://www.wix.com/)

توضيحات

It's Free
Drag & Drop
No Programming
Search Engine Friendly

salehbagheri
جمعه 14 خرداد 1389, 23:22 عصر
هزاران وكتور ارزشمند براي طراحي زيبا در VectorStock

http://creatives.commindo-media.de/www/images/6eece0fe0e128cfe25b941980687f223.gif (http://www.vectorstock.com/)

ehsanes
شنبه 15 خرداد 1389, 20:42 عصر
این سورس سایت فلشی که اقای باقری معرفی کرده بود تمام اکشن اسکریپت ها + فایل

swf + فایل fla

سایت v5design

http://www.4shared.com/get/307559748/a212a8a1/v5design.html

ricky22
شنبه 15 خرداد 1389, 20:52 عصر
برای اینکه به قدرت jquery پی ببرید به این لینک پایین برید. دانلود کنید مثالاشو اجرا کنید و کف بر شید.!
http://jqueryui.com/download
__________________

(http://barnamenevis.org/forum/showthread.php?t=208894) (http://barnamenevis.org/forum/showthread.php?t=208894)

salehbagheri
یک شنبه 16 خرداد 1389, 12:31 عصر
چندتا آموزش خیلی توپ پیدا کردم که واقعاً محشرند ... :تشویق: :تشویق:

آموزش کامل ساخت یک صفحه وب حرفه ای با فتوشاپ: Grungy, Translucent Web Portfolio Design !

http://webdesignledger.com/wp-content/uploads/2010/03/webdesign_tutorials_7.jpg (http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-grungy-translucent-web-portfolio-design/)


آموزش کامل ساخت یک صفحه وب حرفه ای با فتوشاپ: Colorfull Corporate Website !

http://webdesignledger.com/wp-content/uploads/2010/03/webdesign_tutorials_3.jpg (http://www.tutorial9.net/photoshop/create-a-clean-and-colorful-web-layout-in-photoshop/)

آموزش کامل ساخت یک صفحه وب حرفه ای با فتوشاپ: Watercolor-Themed Website !

http://webdesignledger.com/wp-content/uploads/2010/03/webdesign_tutorials_14.jpg (http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-watercolor-themed-website-design-with-photoshop/)


آموزش کامل ساخت یک صفحه وب حرفه ای با فتوشاپ: Promotional iPhone App Site !

http://webdesignledger.com/wp-content/uploads/2010/03/webdesign_tutorials_15.jpg (http://psd.tutsplus.com/tutorials/interface-tutorials/create-a-promotional-iphone-app-site-in-photoshop/)


آموزش کامل ساخت یک صفحه وب حرفه ای با فتوشاپ: Beautiful Website From Scratch !

http://webdesignledger.com/wp-content/uploads/2010/03/webdesign_tutorials_2.jpg (http://net.tutsplus.com/tutorials/html-css-techniques/design-a-beautiful-website-from-scratch/)

salehbagheri
یک شنبه 16 خرداد 1389, 12:53 عصر
بازهم اندر توانایی های CSS 3 ! :تشویق::تشویق::کف:

این دکمه های انیمیشنی که همچون لامپ به طور اتوماتیک خاموش روشن میشن رو ببینید، فقط با CSS 3 ساخته شده:
http://webdesignledger.com/wp-content/uploads/2010/04/css3_nav_3.jpg (http://www.zurb.com/playground/radioactive-buttons)

این یکی دکمه ها به طور اتوماتیک با کوچک یا بزرگ شدن فونت تغییر اندازه میدن:
http://webdesignledger.com/wp-content/uploads/2010/04/css3_nav_12.jpg (http://naioo.com/blog/creating-dynamic-buttons-with-css3/)

دنبال منوی افقی هستید؟ CSS3 این قابلیت رو هم براتون فراهم کرده:
http://webdesignledger.com/wp-content/uploads/2010/04/css3_nav_11.jpg (http://www.skyrocketlabs.com/categories/tutorials/css3-only-horizontal-dropline-tab-menu/demo/index.html)

تاحالا به این فکر کردید که با CSS بتونید گالری عکس بسازید؟
http://line25.com/wp-content/uploads/2009/polaroid-gallery/1.jpg (http://line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery)

http://webdesignledger.com/wp-content/uploads/2010/05/css_only_9.jpg (http://www.admixweb.com/2010/03/08/how-to-create-a-fancy-image-gallery-with-css3/)


یکی از مشکلاتی که طراحان تازه کار با اون درگیرند عدم لود شدن سریع تصویر دکمه در حالت Hover هست!
این مشکل رو میتونید با CSS اینطوری حلش کنید:
http://webdesignledger.com/wp-content/uploads/2010/04/css3_nav_4.jpg (http://line25.com/tutorials/how-to-build-a-simple-button-with-css-image-sprites)

با CSS هم میشه چارت ساخت؟ :متعجب:
http://webdesignledger.com/wp-content/uploads/2010/05/css_only_4.jpg (http://cssglobe.com/post/1272/pure-css-data-chart)

http://webdesignledger.com/wp-content/uploads/2010/05/css_only_6.jpg (http://cssglobe.com/post/4175/pure-css-line-graph)

با CSS تایم لاین (Timeline) بسازید: :متفکر:
http://webdesignledger.com/wp-content/uploads/2010/05/css_only_13.jpg (http://mattbango.com/notebook/web-development/pure-css-timeline/)

salehbagheri
یک شنبه 16 خرداد 1389, 13:00 عصر
آیا خودتون رو برای HTML 5 آماده کردید؟

HTML 5 Cheat Sheet (http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/html5-cheat-sheet/html5-cheat-sheet.pdf)

یکی از قابلیت های HTML 5 کشیدن اشکال گرافیکی با استفاده از Canvas هست.

HTML 5 Canvas Cheat Sheet (p://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf)

salehbagheri
یک شنبه 16 خرداد 1389, 13:07 عصر
تا حالا شده دوست داشته باشید همه وبسایت شما رو با همون فونتی ببینند که شما میخواهید، ولی به دلیل نبودن اون فونت در سیستم کاربر این موضوع عملی نشده باشه؟

حالا با این ترفند (نمیشه گفت ترفند) در CSS میتونید فونتهای دلخواه خود را در وبسایت خودتون نمایش بدید:


@font-face {
font-family: MyFontFamily;
src: url('http://example.com/fonts/MyFont.ttf');
}
h1 {
font-family: MyFontFamily;
font-size: 3.2em;
letter-spacing: 1px;
text-align: center;
}


با این یکی هم میتونید یه سایه بندازید پشت متن!


h1 {
text-shadow: #003471 2px 5px 2px;
}

http://images.sixrevisions.com/2009/12/11-02_text_shadow.jpg

salehbagheri
یک شنبه 16 خرداد 1389, 14:55 عصر
یه قابلیت بسیار جالب و مفیدی که در CSS 3 گنجانده شده ویژگی border-image هست!

طرز کار بسیار جالبی داره! به این شکل دقت کنید:
http://www.zurb.com/playground/awesome-overlays/border-image-sketch.jpg

شما ابتدا یک الگوی ساده و کوچیک درست میکنید و سپس با استفاده از border-image اون رو با هر اندازه دلخواه به عناصر صفحات وب Apply میکنید!

مثلا:

http://www.zurb.com/playground/awesome-overlays/border-image-mockup.png

به این صورت:


Mozilla:
-----------
-moz-border-image: url(border-image.png) 5 5 5 5 stretch;

Other Browser:
------------------
-webkit-border-image: url(border-image.png) 5 5 5 5 stretch;

Standard:
-------------
border-image: url(border-image.png) 5 5 5 5 stretch;


اطلاعات بیشتر:
http://www.lrbabe.com/sdoms/borderImage/index.html
http://www.css3.info/preview/border-image/

salehbagheri
یک شنبه 30 خرداد 1389, 14:22 عصر
يه وقتهايي بود كه من به Pattern مخصوص احتياج داشتم و مجبور بودم خودم اون رو بسازم، اما متأسفانه وقتي شلوغ ميشد و آبجكتها زياد، رشته كار از دستم در ميرفت و همه چي خراب ميشد ... اما با آموزش زير تونستم اين مشكل رو برطرف كنم ...

آموزش ساخت Pattern هاي پيچيده ...

http://psdtuts.s3.amazonaws.com/0493_Create_Complex_Pattern/final-small.jpg (http://psd.tutsplus.com/tutorials/designing-tutorials/quick-tip-create-a-complex-pattern-by-nudging-smart-objects/)

salehbagheri
یک شنبه 30 خرداد 1389, 14:30 عصر
طريقه ساخت نماي يك سايت MultiMedia !

http://psdtuts.s3.amazonaws.com/0472_Creative_Mini_World/final.jpg (http://psd.tutsplus.com/tutorials/designing-tutorials/design-a-multimedia-website-layout-in-photoshop/)

اين آموزشها صرفاً ساخت يك نماي خالي نيست، بلكه در كنار اون ميتونيد از ترفندهاي به كار رفته در اين آموزشها در طراحي هاي خودتون استفاده كنيد.

sahele_sheni
یک شنبه 30 خرداد 1389, 23:13 عصر
واقعا ممنون

salehbagheri
جمعه 04 تیر 1389, 11:04 صبح
With FormsStack (http://www.formstack.com/) anyone can easily:

Create Contact Forms
Administer Surveys
Accept Online Donations
and much more ...

salehbagheri
جمعه 04 تیر 1389, 11:12 صبح
دانلود PSD يك سايت كامل با تمامي صفحات مورد نياز

http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/blu-template/blue1_450px.jpg
Home Page

http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/blu-template/blue3_450px.jpg
Portfolio

http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/blu-template/blue4_450px.jpg
Blogs

منبع + لينك دانلود (http://www.smashingmagazine.com/2010/06/22/free-portfolio-psd-template-bluemasters/)

blackcats
جمعه 04 تیر 1389, 11:56 صبح
موضوع خیلی جالبی بود آدم وقتی با این موارد آشنا میشه میبینه با فرض این که 4 ساله تو کاره طراحی سایت هست اما هنوز هیچی بلد نیست!!!!!!!!

earse+erse
دوشنبه 07 تیر 1389, 05:10 صبح
یکی از چیزهایی که در طراحی های مدرن بنرها و تصاویر تبلیغاتی برای سایت مورد استفاده اکثر طراحان قرار میگیره طرحهای Abstract یا Floral هست که به شدت بهشون علاقه دارم.

میتونید با استفاده از این طرحها بیننده های بیشتر رو جذب کنید!

http://up.iranblog.com/Files/a3f2dcd8b3e34729a83b.jpg
http://up.iranblog.com/Files/4212a4a71d144e41a131.jpg
http://up.iranblog.com/Files/ed64ba827c8c445ca254.jpg

دانلود چند نمونه:
http://10steps.sg/wp-content/uploads/photo25/0.jpg (http://qbrushes.net/plants/suddenly-spring/)

سلام به همه

دست همگی درد نکنه.

یه مشکلی بود در باره فایل های دانلود شده از این سایت(qbrushes.net) که پسوندشون .ABR هست.
۱- نوع این فایل ها چیه؟
۲-چرا وقتی اجرا می شوند فوو شاپ باز می شود ولی چیزی ظاهر نمی شود؟
۳-فتو شاپ من خرابه؟

با تشکر

راستی چرا ادامه نمیدین ، تاپیک جزابیه.

اوبالیت به بو
دوشنبه 07 تیر 1389, 10:36 صبح
انصافا JQuery وحشتناك ترين بين اينهاست.

Dr.Bronx
دوشنبه 07 تیر 1389, 11:22 صبح
سلام به همه

دست همگی درد نکنه.

یه مشکلی بود در باره فایل های دانلود شده از این سایت(qbrushes.net) که پسوندشون .ABR هست.
۱- نوع این فایل ها چیه؟
۲-چرا وقتی اجرا می شوند فوو شاپ باز می شود ولی چیزی ظاهر نمی شود؟
۳-فتو شاپ من خرابه؟

با تشکر

راستی چرا ادامه نمیدین ، تاپیک جزابیه.

نه فتوشاپ شما کامل سالم هست

باید اون فایل ها رو که Brush هستند داخل پوشه Photoshop > Preset > Brush کپی کنید .
بعد فتوشاپ رو اجرا کنید .کلید B رو بزنید از پلت بالا قسمت انتخاب Brush رو انتخاب کنید .
نام براش مورد نظر در لیست هست . اون رو انتخاب کنید و شروع به طراحی کنید .

موفق باشید ./

salehbagheri
دوشنبه 07 تیر 1389, 11:32 صبح
یه مشکلی بود در باره فایل های دانلود شده از این سایت(qbrushes.net) که پسوندشون .ABR هست.
۱- نوع این فایل ها چیه؟
۲-چرا وقتی اجرا می شوند فوو شاپ باز می شود ولی چیزی ظاهر نمی شود؟
۳-فتو شاپ من خرابه؟

دوست عزیز اونها Brush های فتوشاپ هستند! به این صورت استفاده کنید:

در برنامه فتوشاپ از منوی Edit گزینه Preset Manager را انتخاب کنید و از منوی پایین افتادنی گزینه Brush را انتخاب کنید ... سپس با استفاده از دکمه Load فایلهای دانلود شده رو جستجو و انتخاب کنید. خواهید دید که چند آیتم به قسمت Brush ها اضافه میشود. (حالا روی Done بزنید)

یه صفحه جدید برای طراحی باز کرده و از ToolBox (منوی سمت چپ تصویر) ابزار Brush رو انتخاب کنید و از نوار ابزار Option نوع Brush دلخواه خود را انتخاب کرده و بر روی صفحه بکشید ...

salehbagheri
دوشنبه 07 تیر 1389, 12:01 عصر
در مورد نسبت طلایی (مستطیل طلایی) چیزی میدونید؟

طبق تحقیقات و پژوهشهای علمی ثابت شده که هر شیئی که این نسبت رو رعایت کرده باشه زیباتر جلوه میکنه ...

آیا این نسبت در وب هم جایگاهی دارد؟ ادامه مطلب (http://stylizedweb.com/2010/03/10/golden-rectangle-golden-section-psd-guide/)

salehbagheri
دوشنبه 07 تیر 1389, 12:04 عصر
یادمه در طراحی یه بخش از صفحه سایتم به مشکل برخورده بودم و جناب آقای emad_67 این مشکل بنده رو به شکلی حیرت آور و عجیب حل کردند ... :تشویق: :کف: :گیج: :متفکر:

در CSS معمولا دچار مشکلاتی میشوید که حل کردنش بعضی اوقات خیلی دشواره! اما با CSS Hack این دشواریها آسان میشه ...

در این جا 10 مورد از بهترین Hack ها رو انجام داده ...
http://stylizedweb.com/2008/02/14/10-best-css-hacks/

salehbagheri
دوشنبه 07 تیر 1389, 12:10 عصر
"The Web Strategy Pyramid: A Well-balanced Web Strategy" نام مقاله ای هست که در مورد استراتژی ساخت وب سایت صحبت کرده!

بسیار جالبه و برای اونهایی که نمیدونن در طراحی یک وبسایت چه چیزهایی از اهمیت بیشتری برخورداره خیلی مفیده .

http://images.sixrevisions.com/2010/06/19-02_pyramid.jpg (http://sixrevisions.com/content-strategy/the-web-strategy-pyramid-a-well-balanced-web-strategy/)

salehbagheri
شنبه 26 تیر 1389, 14:19 عصر
سری جدید آیکونهای مورد نیاز طراحی صفحات وب و ...

http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/uploader/images/free-all-purpose-icons-gcons/release.jpg (http://www.smashingmagazine.com/2010/07/14/gcons-free-all-purpose-icons-for-designers-and-developers-100-icons-psd/)

salehbagheri
شنبه 16 مرداد 1389, 15:49 عصر
CSS3 همچنان می تازد! :تشویق:

حالا دیگه میشه فلش رو گذاشت کنار! :قهقهه:
http://images.sixrevisions.com/2010/07/30-05_css3-man.png (http://www.optimum7.com/css3-man/animation.html)

بازی Anigma
http://images.sixrevisions.com/2010/07/30-07_css3_anigma.png (http://icefox.net/anigma/)

گالری عکس انیمیشنی
http://images.sixrevisions.com/2010/07/30-09_css3_polaroids.jpg (http://media.24ways.org/2009/14/5/index.html)

ساخت منوی پخش صدا (Music Player)
http://images.sixrevisions.com/2010/07/30-08_music_player.png (http://webstuffshare.com/demo/CSSMusicPlayer/)

UltraZoom
شنبه 16 مرداد 1389, 21:05 عصر
حالا دیگه میشه فلش رو گذاشت کنار!
شما هم تحت تاثیر ورود یک تکنولوژی جدید قرار گرفتید . حالا حالاها مونده تا فلش کنار بره . این دو تا در کنار هم تا سالها به خوبی و خوشی زندگی می کنند .

salehbagheri
دوشنبه 18 مرداد 1389, 02:00 صبح
50 ابزار و منابع مفید برای همه طراحان وب

http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/07/scriptsrc.jpg (http://www.smashingmagazine.com/2010/07/26/50-useful-tools-and-resources-for-web-designers/)

@UltraZoom :

منم قبول دارم که فعلا زوده ولی کم کم جرقه های جمع شدنش داره میخوره ... یا حداقل کارآییش داره محدود به بعضی چیزهای دیگه میشه ... مثلا الان استفاده از منوی Flash با وجود JQuery به نظرم کاملا ...

ولی اون مثالی که در مورد انیمیشن CSS (مرد عنکبوتی) گذاشتم یه مشکل داره که لودش بسیار کنده. اگه همون رو با Flash میساختند خیلی زودتر لود میشد. یه مشکل CSS عدم فشرده سازی تصاویر یا فایلها هست.

eshpilen
دوشنبه 18 مرداد 1389, 08:49 صبح
زبانها و فناوریهای عمده و مشهور در بیشتر موارد به کلی منقرض نمیشن (یک درصد بسیار کم از برنامه نویسان رو هم میتونیم معادل انقراض تلقی کنیم). چیزی که اتفاق میفته محدود شدن یا تغییر زمینه های کاربرد اونا هست. مثلا یه زمانی که زبانهای برنامه نویسی سمت سرور برای وب به صورت امروز وجود نداشتن، استفاده از زبانهایی مثل سی و سی++ برای برنامه نویسی سمت سرور وب بصورت CGI متداول بود. امروزه دیگه خیلی کم این زبانها در چنین کاربردهایی استفاده میشن و از این حیطه عقب نشینی کردن و جاشون رو به زبانهای راحت و محبوبی مثل PHP دادن، اما هنوزم کمیت و اهمیت/کیفیت کدها و برنامه هایی که به سی و سی++ نوشته میشه بالاترین رتبه های آماری رو داره بین زبانها و فناوریهای مختلف. بخصوص که این زبانها کاربرد برنامه نویسی سیستمی هم دارن؛ و البته در اپلیکیشن های Performance Critical هم کاربرد جدی دارن (مثلا بازیهای پیشرفتهء امروزی که تاجایی که میدونم تقریبا تمامشون با سی++ نوشته میشن؛ همینطور خیلی اپلیکیشن های کاربردی مشهور با سی++ نوشته شدن).
البته شاید نقطهء توجه ما طبیعتا بیشتر در حیطهء اپلیکیشن نویسی باشه که در این حیطه تاثیر اینطور پیشرفت ها و تغییرات فناوری خیلی بیشتر به چشم میاد و تاثیر میذاره. هرچند سی و سی++ هنوز هم در مقیاس وسیع برای برنامه نویسی اپلیکیشن بکار میرن (در لینوکس که خیلی هم بیشتر).

از طرف دیگه، بخصوص شرکتهای تجاری یا حتی غیرتجاری وقتی ببینن زبان و فناوری اونها تحت فشار شدید یک رقیب جدی قرار گرفته که اگر کاری نکنن ممکنه در آیندهء نزدیک جاشون رو بطور کامل بگیره، مسلما معمولا عکس العمل و تطابق و انعطاف نشون میدن و با کارهایی مثل گسترش و تجهیز، ارزان کردن، آزاد و بازمتن کردن، و روشهای دیگه سعی میکنن محصول خودشون رو از خطر نابودی یا انزوا دور کنن و یا به فکر کوچ به زمینه ها و حیطه های دیگری باشن. خیلی وقتها ترجیح میدن بجای نابودی دستاوردهای عزیزشون، با آزاد و بازمتن کردن اونها امکان بقای اونها رو ایجاد کنن، حتی باوجود اینکه ممکنه دیگه براشون هیچ نفع مادی و منبع درآمدی نداشته باشه.
این رقابت چیز خوبی هست در اینطور مواقع!
و آزاد و بازمتن بودن، درکل از همه چیز بهتره.
بنده خودم با اینکه کلی وقت و انرژی برای یادگیری فلش و اکشن اسکریپت گذاشتم، اما از جایگزین شدن اونها با زبانها و فناوریهای آزاد که تحت کنترل و مالکیت شرکت خاصی نباشن استقبال میکنم، چون از حامیان جدی نرم افزارهای آزاد/بازمتن هستم. اگر دنبال فلش هم رفتم بخاطر این بود که جایگزین مناسب دیگری براش نبود اون موقع و بعنوان یک برنامه نویس وب دوست داشتم بتونم تمام اجزای مورد نیاز هر پروژه ای رو خودم بسازم. همیشه در پیاده سازی آزاد/بازمتن فلش و در دنیای لینوکس مشکلات بزرگی وجود داشته.

این HTML5 هم که واقعا کولاک کرده. منکه پیشبینی نمیکردم یه زمانی به این سادگی و زیبایی و راحتی، مشکلاتی مثل جایگزین فلش حل شدنی باشه. خوبیش اینه جزیی از استاندارد HTML هست و آزاده و در تمام مرورگرها بصورت پیشفرض پیاده سازی میشه. بعید نیست فلش به سرعت رو به انقراض هم بره. حداقل چیزی که احتمالش خیلی زیاده اینه که وقتی بیشتر مرورگرهایی که کاربران استفاده میکنن، پشتیبانی خوبی از HTML5 و CSS3 داشتن، کاربرد فلش در برنامه نویسی کلاینت ساید وب به سرعت افت شدیدی خواهد کرد.

salehbagheri
جمعه 22 مرداد 1389, 00:34 صبح
اینم چندتا منوی حرفه ای از لحاظ گرافیک

http://www.psdgraphics.com/wp-content/uploads/2009/08/horizontal-html-css-menu.jpg (http://www.psdgraphics.com/html-css/horizontal-html-css-navigation/)

فایل PSD اش رو هم میتونید از اینجا دانلود کنید.
http://www.psdgraphics.com/psd/psd-website-navigation-menus-set/

اینم دومیش:
http://www.psdgraphics.com/wp-content/uploads/2010/02/html-css-web-navigation.jpg (http://www.psdgraphics.com/html-css/psd-web-navigation-html-and-css-menus-set/)

salehbagheri
جمعه 22 مرداد 1389, 00:46 صبح
تصاویر 19 مگاپیکسلی دانلود کنید!

تصاویر مناسب برای بگکراند و استفاده در صفحات وب (http://www.psdgraphics.com/category/backgrounds/)

salehbagheri
پنج شنبه 28 مرداد 1389, 01:45 صبح
به این تصویر نگاه کنید:

http://irupload.ir/images/ddakblt80odpzvqi2ds.jpg

به نظر شما چه جوری میشه ظرف 2 دقیقه چنین امواجی راه انداخت؟
این موضوع مدتها ذهن منو به خودش مشغول کرده بود. تا اینکه پس از جستجوی فراوان به یکی از توانایی های Microsoft Expression Design 4 پی بردم.

کافیه از طریق این آموزش (http://geekswithblogs.net/tkokke/archive/2009/10/16/twirling-smoke-effect-in-expression-design.aspx) چنین لوگوها و بنرهایی ایجاد کنید:

http://irupload.ir/images/i5md2vbygk49nbxm1sle.jpg

http://up.iranblog.com/Files/49c360622fcd48b89ba1.png