اموزش طراحی قالب جوملا

omidnami · اردیبهشت 90

سلام و درود فراوان به دوستان جوملایی

در این قسمت از آموزش طراحی قالب جوملا فقط قصد معرفی ابزار مورد نیاز را دارم

و ادامه آموزش در اسراُ وقت توضیح داده میشود.

مقدمه

روش های زیادی برای طراحی قالب جوملا وجود دارد که من ساده ترین آنها را برای شما توضیح میدهم.

این روش را من در صورتی توصیه میکنم که شما قصد طراحی قالب به صورت کرافیکی را داشته باشید

در غیر این صورت فقط دریم ویور و پلاگین مورد نظر کافیست.

ابزار و نرم افزار های مورد نیاز

نرم افزار فتوشاپ

پلاگین PSDBreaker

نرم افزار دریم ویور

پلاگین D-Form_Joomla15

البته باید خدمت شما عرض کنم که پلاگین های حرفه ای و کاربردی دیگری هم وجود داردکه اکثراً تجاری هستند.

ولی برای شروع همین کافیست.....

دانش و مهارت های شخصی

آشنایی با فتوشاپ (در حد مبتدی)

اشنایی با html,css(تا حدودی)

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

معرفی

پلاگین PSDBreaker :

این یک پلاگین جهت تبدیل فایل psd به html,css میباشد که مخصوص فتوشاپ است. نیازی به نصب نیست

پلاگین D-Form_Joomla15:

همانطور که از نام این پلاگین پیداست تمامی کدهای جوملا 1.5 در این پلاگین وجود دارد که با نصب ان در قسمت insert نرم افزار دریم ویور یک فایل با همین نام ایجاد میشود. پس از دریافت نصب شود.

پایان قسمت اول

پس از اینکه این موارد را به صورت کامل دریافت کردید و دانش مورد نیاز را کسب کردید قصمت دوم توضیح داده میشود.

عبدالله عصمتی · اردیبهشت 90

اگر امکان داره در آپلود سنتر جدید آپلود کنید

دانلود هر دو فایل در یک فایل در آپلود سنتر جدید جومینا

http://www.jmdownload.ir/download.php?filename=13057702321.zip

:thankyou:اگه دوستان مشکل داشتند فایل رو پیوست هم کردم

Saeed_Shamsi · اردیبهشت 90

با سلام

دوستا عزیز از ارسال پست های اضافی خوداری کنید تا روند آموزش به خوبی جلو بره ....

- پست های اضافی حذف شدند.

یا حق

omidnami · اردیبهشت 90

آموزش طراحی قالب جوملا (ساخت psd قالب و تبدیل به html و php)

سلام و درود فراوان به دوستان جوملایی

میریم سراق قسمت دوم اموزش "امید وارم که موارد بالا را تهیه کرده باشید"

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

نکته ها

از قبل طرح قالب و .... را در یک کاغذ آماده کنید

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

تصاویر را زیاد گرافیکی طراحی نکنید چرا که حجم قالب بالا رفته و .......

نام گذاری تصاویر بسیار تاَسیر دارد.

[align=CENTER]در صورتی که آشنایی با فتوشاپ ندارید بگید آموزش را قرار بدم

[align=RIGHT]

[/align][/align]قالب را با فرمت psd و نام index ذخیره کنید .....

تبدیل psd به html

فایل psd قالب را در فتوشاپ باز کنید و با ابزار اسلایس (slise) تصاویر مورد نظر را جدا کنید.

از گزینه های file->script->browse به آدرس پوشه PSDBreaker رفته و فایل PSDBreaker.air

را انتخاب کنید.

حال در پوشه ای که قالب psd سایت را ذخیره کرده بودید یک فایل css و یک فایل html ایجاد شده.

تبدیل html به php

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

من برای کامل بودن این آموزش توضیح میدم......

همه ما میدانیم که جوملا یک سیستم مدیریت محتوا به زبان php است

پس باید فایل html به php تبدیل بشه

فایل html را در نرم افزار Notepad++ اجرا کنید.

از منو language ->p->php را انتخاب کنید و از منو file روی گزینه save as کلیک کرده و فایل را ذخیره میکنیم.

پایان قسمت دوم

tanha_to0 · اردیبهشت 90

دوست عزيز

ضمن تشكر از وقتي كه براي آموزش ميگذاريد

- لطفا در مورد اسلايس تصاوير بيشتر توضيح دهيد و در صورت امكان تصويري نمونه اسلايس شده باشد بصورت psd يا محل اسلايس رنگي شده باشد بگذاريد.

- بايد ها و نبايد ها در موقع اسلايس ؟

- نحوه اسلايس در تعيين موقعيت ها (right - left - banner , ..... ) و حجم نهايي قالب تاثير دارد ؟

-

با تشكر

omidnami · اردیبهشت 90

با تشکر از دقت شما به این آموزش

به زودی آموزش ساخت قالب psd را قرار میدهم

موفق باشید.

omidnami · اردیبهشت 90

قسمت سوم آموزش طراحی قالب جوملا (ساخت گرافیک قالب در فتو شاپ 1)

سلام و درود به دوستان جوملایی

امید وارم تا به اینجا از آموزش های من استفاده کافی را برده باشید.....

در قسمت سوم قرار بود نحوه کد نویسی جوملا و استفاده از پلاگین های دریم ویور را توضیح بدم،

ولی به خواطر درخواست آموزش طراحی psd قالب که بسیار هم مهم است تصمیم به نشر این آموزش گرفتم.

ساختار و لایه ها

براي شروع ساختار بسیار ساده و عمومی را در نظر میگیریم که بسیاري از شما دوستان با این ساختار آشنا هستید.

[align=CENTER]header, content, right, footer, nav

[align=CENTER]

اینها هر کدام از اجزاء تشکیل دهنده قالب ما خواهند بود و نحوه قرارگیري و جایگاه آنها در قالب بسیار مهم است.

[align=RIGHT]خوب براي شروع به محيط نرم افزار فتوشاپ مي رويم و يک برگه با عرض و طولpx 1000 در px 1200 ايجاد مي کنيم.

در اينجا سعي شده عرض مورد نظر بيشتر از عرض واقعي وب سايت در نظر گرفته شود تا محيط باز تري براي کار وجود داشته باشد

و در انتها اين برگه به اندازه واقعي خود در خواهد آمد.

اگر با محيط نرم افزار فتوشاپ آشنايي کافي داشته باشيد کار با اين خود آموز براي شما بسيار راحت خواهد بود. براي سهولت در کار از خط کش و خط هاي کمکي استفاده ميکنيم .

مقياس خط کش را برايpixel تنظيم کنيد (واحد اندازه گيري در طراحي وب سايت pixel است.)

[align=CENTER]

[align=RIGHT]

[/align][align=RIGHT]طبق تصویر دو خط کمکی عمودي یکی در اندازهpx 100 و ديگري در 900 px ايجاد کنيد.

در حال حاضر عرض قالب 800px در نظر گرفته شده است ( بين خط کمکي رويpx100 و خط کمکي روي 900 px)

بعد ازايجاد اين دو خط کمکي يک خط ديگر در اندازه .630 px ايجاد کنيد. در حال حاضر 3 خط کمکي در اين برگه ايجاد شده است. در صورت نياز مي توانيد با کشيدن خط ها و Drag کردن آنها بر روي خط کش آنها را پاك کنيد.

Header

[/center]

براي ايجاد نوار منوها طبق تصوير يک مستطيل با ارتفاع 60 px ايجاد کنيد، در ابتدا رنگ اين مستطيل مهم نيست زيرا ازگراديانت ها براي زيباتر شدن آن استفاده خواهيم کرد.

پس از ايجاد اين مستطيل، گراديانتي با استفاده از رنگ e2e3e4# تا bebdbd# با زاويه 90 درجه ايجاد کنيد.

Footer

براي ايجاد footer نيز از يک مستطيل با رنگ 5d5a5a# استفاده کنيد. در اينجا ارتفاع 50 px کافيست.

يک footer خوب و استاندارد نقش بسيار ارزنده اي در بالا بردن دسترسي پذيري قالب و حتي زيبايي آن دارد و يکي از اجزاي مهم يک وب سايت است .

این آموزش ادامه دارد .....

لطفاً پروژه خود را با فرمت psd ذخیره کنید تا بعد.[/align][/align][/align][/align][/align]

sajad dp · خرداد 90

تبدیل psd به html فایل psd قالب را در فتوشاپ باز کنید و با ابزار اسلایس (slise) تصاویر مورد نظر را جدا کنید. از گزینه های file->script->browse به آدرس پوشه PSDBreaker رفته و فایل PSDBreaker.air را انتخاب کنید. حال در پوشه ای که قالب psd سایت را ذخیره کرده بودید یک فایل css و یک فایل html ایجاد شده.

این اتفاق آخرش انجام نشد!

چون حداقل CS5 در قسمت ذکر شده فرمت air رو قبول نمیکنه و باید یکیازفرمت های jsx یا js باشه...

وقتی هم که PSDBreaker.air رو با adobe air نصب میکنم و از طریق آدرس مسیری که گفتین فایل jsx رو اجرا میکنم یک پوشه کنار فایل پی اس دی که محتوی لایه ها هست ایجاد میشه و اثری از فایل سی اس اس و اچ تی ام ال نیست!

ایراد کجاست؟

tanha_to0 · خرداد 90

دوست عزيز

مراحل تبديل psd به اچ تي ام ال توسط سايت سازنده پلاگين psdbreaker به صورت زير مي باشد

موفق باشيد

How to convert PSD to HTML / XHTML and CSS:

1

Open .PSD file in Photoshop

2

Activate the PSD Breaker plugin

(File > Scripts > PSD Breaker)

3

When ready, click convert to start PSD conversion

4

Check the resulted XHTML file

5 That’s all. In less than a minute!

omidnami · خرداد 90

از

tanha_to0 سپاسگذارم

شما با این روشی که در بالا توضیح داده شده تبدیل کنید.

من هم در ادامه اموزش به چند روش تبدیل اشاره خواهم کرد پیروز باشید...

sajad dp · خرداد 90

ببخشید که 2باره پست میزنم زمان ویرایش پست قبلی گذشته (لطفا اون قبلی پاک بشه)

ایراد رو پیدا کردم:

نسخه دمو psdbreaker تنها اجازه تبدیل فایل psd با حداکثر 5 لایه رو میده و اگه تعداد لایه ها بیشتر باشه فایل سی اس اس رو نمیسازه.

omidnami · خرداد 90

ببخشید که 2باره پست میزنم زمان ویرایش پست قبلی گذشته (لطفا اون قبلی پاک بشه)

ایراد رو پیدا کردم:

نسخه دمو psdbreaker تنها اجازه تبدیل فایل psd با حداکثر 5 لایه رو میده و اگه تعداد لایه ها بیشتر باشه فایل سی اس اس رو نمیسازه.

اگر نسخه بهتری پیدا کردم و تجاری نبود حتماً قرار میدم

ecomp.ir · خرداد 90

قسمت سوم آموزش طراحی قالب جوملا (ساخت گرافیک قالب در فتو شاپ 1)

سلام و درود به دوستان جوملایی

امید وارم تا به اینجا از آموزش های من استفاده کافی را برده باشید.....

در قسمت سوم قرار بود نحوه کد نویسی جوملا و استفاده از پلاگین های دریم ویور را توضیح بدم،

ولی به خواطر درخواست آموزش طراحی psd قالب که بسیار هم مهم است تصمیم به نشر این آموزش گرفتم.

ساختار و لایه ها

براي شروع ساختار بسیار ساده و عمومی را در نظر میگیریم که بسیاري از شما دوستان با این ساختار آشنا هستید.

[align=CENTER]header' date=' content, right, footer, nav

[align=CENTER']

اینها هر کدام از اجزاء تشکیل دهنده قالب ما خواهند بود و نحوه قرارگیري و جایگاه آنها در قالب بسیار مهم است.

[align=RIGHT]خوب براي شروع به محيط نرم افزار فتوشاپ مي رويم و يک برگه با عرض و طولpx 1000 در px 1200 ايجاد مي کنيم.

در اينجا سعي شده عرض مورد نظر بيشتر از عرض واقعي وب سايت در نظر گرفته شود تا محيط باز تري براي کار وجود داشته باشد.

.

.

.

[align=CENTER][align=RIGHT]

این آموزش ادامه دارد .....

لطفاً پروژه خود را با فرمت psd ذخیره کنید تا بعد.[/align][/align][/align][/align][/align]

سلام

من عکسای این قسمت رو نمیبینم

دوستان اگه میشه جای دیگه آپلود کنید ممنون میشم:heart:

omidnami · خرداد 90

سلام این عکسا روی سرور خودم بوده که الان در حال حاضر به علت تعمیرات پائینه و من هم خیلی سرم شلوقه

من عضر خواهی میکنم و خواهش میکنم چند روز تا ادامه اموزش صبر کنید.

امید وارم من را درک کنید.

ecomp.ir · خرداد 90

سلام این عکسا روی سرور خودم بوده که الان در حال حاضر به علت تعمیرات پائینه و من هم خیلی سرم شلوقه

من عضر خواهی میکنم و خواهش میکنم چند روز تا ادامه اموزش صبر کنید.

امید وارم من را درک کنید.

خواهش میکنم:heart:

من اینجا درخواست دادم تا دوستای دیگه اگه قبلآ ذخیره کردن ، دوباره آپلود کنند.

دوستان اگه کسی داره یبار دیگه آپلود کنه:thankyou:

omidnami · خرداد 90

الان فایل های worde اموزش رو برات میزارم فقط خواهشاً بدون ذکر منبع انتشار نکنید.

و منبع :www.namihosting .com میباشد.

از لینک زیر دانلود کنید.

اموزش ادامه دارد اسپم نکنید.

http://www.jmdownload.ir/download.php?filename=13076347451.zip

arashshiler · اردیبهشت 91

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

تو رو خدا این اموزش رو ادامه بدید و نیم کاره نذارید دیگه

Saeed_Shamsi · اردیبهشت 91

با سلام

دوست عزیز این بخش نیز جز همان بخش هاس سطح بندی شده

/ آموزش های سطح بندی شده / متوسط / اموزش طراحی قالب جوملا

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

@ خب کسی که بتونه از این کارا بکنه نیاز به اموزش نداره

خوب دوست عزیز اونطور هم که شما فکر میکنید نیست ...!

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

@ اگه در بخش مربوطه سوالات و پیشنهادادتان رو نپرسید دسترسی شما به این بخش قطع خواهد شد.

زندگیتان سپید

آخرین ارسال های انجمن جومینا

دانلود جوملای فارسی

دانلود افزونه ها

پیامک متصل به جوملا

کانال تلگرام جومینا

اموزش طراحی قالب جوملا

پست های پیشنهاد شده

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید