طراحی قالب گرافیکی سایت

[elhamirani]

درود
1-میشه یه منبع عالی و قوی برای آموزش طراحی قالب گرافیکی سایت بزارید
2-واینکه چطور میتونم قالب های حرفه ای طراحی کنم؟
سپاس

[whitecap]

خب باید برنامه نویسی یاد بگیرید دیگه .
برای طراحی وب بهتره html رو اول یاد بگیرید . چون خیلی پایه ای و خوبه . بعدش برید سراغ زبان ها برنامه نویسی . اگر از برنامه نویسی چیزی نمی دونید بهتره با بیسیک شروع کنید ، بعدش c رو یاد بگیرید . تا بتونید با asp و یا دیگر زبان های برنامه نویسی تحت وب که بر پایه ی c هستند راحت کار کنید . برای گرافیک خوب هم باید از ابزار های گرافیکی مناسب استفاده کنید .
طراحی سایت که شبه نیست ، میگید یک کتاب معرفی کنید . کلی باید وقت بذارید . وگرنه الان همه می تونستند این کارو بکنند .!!!!!

[omidabedi]

طراحی میخواد یاد بگیره بره بیسیک کار کنه!!!!!!

به ترتیب
html-css-javascript-jquery-css frame works
برای طراحی قالب در فتوشاپ هم که همون فتوشاپ
برای طراحی قالب cms هم باید php و mysql بلد باشی


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

[whitecap]

طراحی میخواد یاد بگیره بره بیسیک کار کنه!!!!!!

به ترتیب
html-css-javascript-jquery-css frame works
برای طراحی قالب در فتوشاپ هم که همون فتوشاپ
برای طراحی قالب cms هم باید php و mysql بلد باشی


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

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

[whitecap]

طراحی میخواد یاد بگیره بره بیسیک کار کنه!!!!!!

به ترتیب
html-css-javascript-jquery-css frame works
برای طراحی قالب در فتوشاپ هم که همون فتوشاپ
برای طراحی قالب cms هم باید php و mysql بلد باشی


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

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

[s2/mri]

درود
به نظر من اول ایده
بعد طراحی با فتوشاپ این لینک (http://www.photoshoptutorials.ws/photoshop-tutorials/layouts/how-to-create-a-professional-web-layout-in-photoshop/) ، لینک2 (http://wegraphics.net/blog/tutorials/how-to-create-a-professional-and-clean-web-layout-with-psd-to-html-conversion/)، لینک3 (http://www.1stwebdesigner.com/tutorials/web-design-layout-tutorials-2010/)، لینک4 (http://sixrevisions.com/tutorials/photoshop-tutorials/create-a-clean-and-professional-web-design-in-photoshop/) منابع اموزشی زیادی وجود داره ولی همشون یه طرح خاص رو اموزش میدن(باید هم همینطور باشه)
بعد کد زنی و تبدیل اون به قالب

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



موفق باشید

[elhamirani]

من فقط میخوام طراحی قالب سایت با فوتوشاپ رو یاد بگیرم اگر میشه راهنماییم کنید

[s2/mri]

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

سایت های پولی مثل این سایت (https://www.udemy.com/photoshop-for-web-design-beginners/) هم هست ولی همون سایت هایی که معرفی کردم کار راه اندازه(در سطح حرفه ای حتی) فقط کافیه شما بتنونید مثل یه پازل حرکت هایی رو که با فتوشاپ یاد میگیرید رو پیاده کنید

بازم تاکید میکنم تو طراحی فقط 2تا چیز مهمه ! ایده و خلاقیت

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

یه فیلم رو هم یادم رفت بذارم -لینک- (http://ketabz.com/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C/%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8/1269-%D8%AA%DA%A9%D9%86%DB%8C%DA%A9%D9%87%D8%A7%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%AA%D9%88%D8%B3%D8%B7-ben-gribbin.html):خجالت:

[tadayoni]

من نمیدونم حرفای دوستان راجع به ویزوال بیسیک و سی و ... چه ربطی به طراحی قالب داره
واقعا اینقدر واجبه که جوابی بدیم ?!
بهتره این کار رو بصورت پروزه ای یاد بگیرید چون حتما باید تمرین داشته باشید تا راه بیافتید
توی سایت های خارجی نمونه های زیادی پیدا میشه و تو سایت persiangfx.com مقالات مختلفی در این زمینه وجود داره که طراحی قالب رو بصورت psd توی فتوشاپ یاد داده

[pary_daryayi]

دوستان آیا طراحی تو فتوشاپ هنوز هم مرسومه ؟

یعنی ابتدا تو فتوشاپ طراحی بشه بعد تبدیل به html بشه .

من همیشه قالب کلی رو با html و css ایجاد میکنم , بعد جاهایی که نیازه ( مثلا لوگو , فوتر , بک گراند و ... ) تو فتوشاپ ایجاد میکنم و تصویر رو فراخوانی میکنم .

[azamicu]

بله دوست عزیز
بهترین و قشنگترین قالب های دنیا اول طرحشون کشیده میشه و سپس با فتوشاپ طراحی میشن و بعد از اون کد میشن
من که خودم این کارو کردم میتونید ببینید:
http://www.sarat.ir/

[omidabedi]

منم یه جورائی با ایشون (pary_daryayi) موافقم
خودمم هیچ وقت طراحی رو تو فتوشاپ انجام نمیدم مگر برای طرحهای خیلی پیچیده
دلیلش هم اینه که شما مجبوری از عکس استفاده کنی برای همه چی مثلا سایه ها کادر و منو ها که اصلا حرفه ای نیست
خود من شخصا به هیچ کس طراحی با فتوشاپ رو پیشنهاد نمیکنم
خیلی غیر استاندارد هست
زبان طراحی وب html و css هست به صورت استانداردش و طراحی با فتوشاپ یه روش من در اوردیه که با استقبال خوبی مواجه شده
اگر واقعا میخواید کار طراحی رو ادامه بدید از html و css استفاده کنید هم به درکتون کمک میکنه هم با وب بیشتر اشناتون میکنه نه نیازی به بیسیک هست نه چیزی
چرا که html یه زبان کد نویسی هست نه برنامه نویسی/شما در html چیزیرو نمینویسی تابعی وجود نداره و و و و

[s2/mri]

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

این هم که میگن تبدیل psd به html لزوما این نیست که از فتوشاپ یه خروجی برای وب بگیرید!(چون میدونین خورجی فتوشاپ با table که دیگه منسوخ شده)

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

[refugee]

دوستان آیا طراحی تو فتوشاپ هنوز هم مرسومه ؟

یعنی ابتدا تو فتوشاپ طراحی بشه بعد تبدیل به html بشه .

من همیشه قالب کلی رو با html و css ایجاد میکنم , بعد جاهایی که نیازه ( مثلا لوگو , فوتر , بک گراند و ... ) تو فتوشاپ ایجاد میکنم و تصویر رو فراخوانی میکنم .

خب کار شما اشتباه است . چرا ؟

چون :
1. چطور میخواهین دمو را به مشتری نشان بدین ؟
2. بر چه اساس رنگ بندی و امکانات میخواهین طراحی کنید ؟
3. ایا مشتری اون ترکیب و رنگ بندی رو پسندید که کد نویسی کنید ؟
4. اومدیم و کد نویسی کردین مشتری خواست ظاهرش رو تغییر بده طبق میل خودش , حاضرین حداقل 5 ساعت وقت بذارید کد ها رو Edit کنید ؟ یا تو 10 دقیقه طرح اولیه رو ویرایش کنید ؟
5. اصول اولیه هر کاری پیاده سازی ان ( الگوریتم- چارت ) است .

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

1. سفارش ( انتخاب موضوع سایت )
2. طرح اولیه ( الگوریتم )
3. طرح گرافیکی وبسایت ( رنگ بندی - امکانات و نوشتار و عکس و .. ) تو فتوشاپ .
4. کد نویسی ظاهر وبسایت ( html - css - javascript - jquery )

// تا اینجا ما قالب استاتیک رو اماده کردیم .

5. کد نویسی برای سیستم عامل ( وردپرس - جوملا و .. برای سایت , و برای وبلاگ هم بلاگفا - میهن بلاگ و .. )

/* کد های سیستم عامل ها رو باید از خودشان تهیه کنید */

[omidabedi]

خب کار شما اشتباه است . چرا ؟

چون :
1. چطور میخواهین دمو را به مشتری نشان بدین ؟
2. بر چه اساس رنگ بندی و امکانات میخواهین طراحی کنید ؟
3. ایا مشتری اون ترکیب و رنگ بندی رو پسندید که کد نویسی کنید ؟
4. اومدیم و کد نویسی کردین مشتری خواست ظاهرش رو تغییر بده طبق میل خودش , حاضرین حداقل 5 ساعت وقت بذارید کد ها رو Edit کنید ؟ یا تو 10 دقیقه طرح اولیه رو ویرایش کنید ؟
5. اصول اولیه هر کاری پیاده سازی ان ( الگوریتم- چارت ) است .

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

1. سفارش ( انتخاب موضوع سایت )
2. طرح اولیه ( الگوریتم )
3. طرح گرافیکی وبسایت ( رنگ بندی - امکانات و نوشتار و عکس و .. ) تو فتوشاپ .
4. کد نویسی ظاهر وبسایت ( html - css - javascript - jquery )

// تا اینجا ما قالب استاتیک رو اماده کردیم .

5. کد نویسی برای سیستم عامل ( وردپرس - جوملا و .. برای سایت , و برای وبلاگ هم بلاگفا - میهن بلاگ و .. )

/* کد های سیستم عامل ها رو باید از خودشان تهیه کنید */


ج سوال ها
1.مشتری اگر واقعا مشتری باشه و براش اهمیت داشته باشه و یه کارشناس کامپیوتر داشته باشه مثله بعضی از شرکت ها دقیقا مشخص میکنه چی میخواد-اگرم که مشتری ساده باشه و بهت نگه (چون اکثرا میگن خودتون مختارید ) بر اساس نیازش براش تهیه میشه.
2.رنگ بندی که دیگه مشخص هست علاوه بر اون طرح رنگ بندی رو خیلی از سایت ها میدن مثل این colorschemedesigner.com
3.....
4.اول که طراح اول میاد گرید بندی و چارچوب سایت رو بر اساس نیاز طراحی میکنه و مشاوره میده قبلش به مشتریاش همینجوری که پا نمیشه برای خودش طرح بده که.

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

[omidabedi]

البته اینم بگم این یه تصمیم گیری شخصیه
هر طراح استایل خودشو داره
من طرحهای خیلی پیچیده رو که css3 از پسش بر نمیاد رو با illustrator طراحی میکنم

[elhamirani]

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

[omidabedi]

http://webhub.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%82%D8%A7%D9%84%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%AF%D8%B1-%D9%81%D8%AA%D9%88%D8%B4%D8%A7%D9%BE-%D8%A7%D8%B2-%D8%A7%D8%A8%D8%AA%D8%AF

اگر با اینگلیسی مشکل ندارید اینا رو میشه پیدا کرد

http://eramdownload.com/%D9%81%DB%8C%D9%84%D9%85-%D9%87%D8%A7%DB%8C-%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C/%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%81%D9%88%D8%AA%D9%88%D8%B4%D8%A7%D9%BE-%D8%AF%D8%B1-10-%D9%87%D9%81%D8%AA%D9%87-creativtechs-10-week-p/




http://eramdownload.com/%D9%81%DB%8C%D9%84%D9%85-%D9%87%D8%A7%DB%8C-%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C/%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C-%D9%81%D8%AA%D9%88%D8%B4%D8%A7%D9%BE-%D8%A7%D8%B2-%D9%BE%D8%A7%DB%8C%D9%87-%D8%AA%D8%A7-%D9%BE%DB%8C/


http://www.google.com/#bav=on.2,or.r_qf.&fp=6bbc363702c34ec1&q=%D9%81%DB%8C%D9%84%D9%85+%D8%A7%D9%85%D9%88%D8%B 2%D8%B4%DB%8C+%D9%81%D8%AA%D9%88%D8%B4%D8%A7%D9%BE

[refugee]

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

الهام خانم فکر میکنم شما کلا فتوشاپ بلد نیستین ؟

پیشنهاد من یه لوه اموزش فتوشاپ است . ( وقتی فتوشاپ رو بلد باشید , ایده و درست کردن یک قالب کاری نداره{اون موقع باید بفهمید امکانات وبسایت کجاها قرار میگیرد و چه چیزایی نیاز دارد} بعدا میتونید طراحی کنید )
میتونید این لوه اموزشی رو از فروشگاه ها تهیه کنید ( هم اقتصادی تر است هم بصورت فیلم تصویری اموزش دادن ) من خودم فتوشاپ رو از سال 82 اغاز کردم . البته تو خانه یاد گرفتم . :D
تا الانم طراحی وب و برنامه نویسی رو خودم یاد گرفتم . و فکر هم میکنم نیازی به اموزش دیدن نباشه ( کار خاصی نداره )

در مرحله بعدی هم میتونید اموزش html - css و... رو یاد بگیرید .


اقا امید : من فکر میکنم استاندارد سازی طراحی بهتر از فله ای طراحی کردن باشه ( اخه استاندارد که باشه شما میفهمی داری چیکار میکنی , یه طرح داری زمانت بهینه تقسیم میشه , حیطه کاریت مشخص میشه , ولی قتی طرحی نداری مجبوری هم کد بنویسی هم رو طرح فکر کنی , اینجوری هم زمانت رو از دست میدی هم نمیفهمی اخرش چیکار میکنی )

+ طراح اونقدر باید خبره باشه که بتونه طرحی رو که به مشتری ارائه میده از پسش بر بیاد نه اینکه زیرش گیر کنه و یا نتونه اسلایدر امادره رو ادیت کنه .
++ مشتری رو شما همیشه خنگ فکر کنید ( دیدگاهی که یک طراح نسبت به طرح داره , هیچ وقت یک مشتری نسبت به اون طرح نداره ) بر همین اساس طراح برای راحتی کار خودش و سلیقه مشتریش نیازمند یک الگوریتم قبل از کد نویسی است . ( من داشتم مشتری که حتی تا چندین بار رنگ بندی و امکانات رو عوض کرده , بلکل ظاهر قالب تغییر کرده , خب اینجوری اگه بیام کد بنویسم , فکرشو بکنید چقدر زمان میبره Edit کنم . با مشتری هم که نمیشه دعوا کرد و ردش کرد . )

نتیجه : پس الکوریتم - چارت قبل از کد نویسی الزامی است .

[omidabedi]

الهام خانم فکر میکنم شما کلا فتوشاپ بلد نیستین ؟

پیشنهاد من یه لوه اموزش فتوشاپ است . ( وقتی فتوشاپ رو بلد باشید , ایده و درست کردن یک قالب کاری نداره{اون موقع باید بفهمید امکانات وبسایت کجاها قرار میگیرد و چه چیزایی نیاز دارد} بعدا میتونید طراحی کنید )
میتونید این لوه اموزشی رو از فروشگاه ها تهیه کنید ( هم اقتصادی تر است هم بصورت فیلم تصویری اموزش دادن ) من خودم فتوشاپ رو از سال 82 اغاز کردم . البته تو خانه یاد گرفتم . :D
تا الانم طراحی وب و برنامه نویسی رو خودم یاد گرفتم . و فکر هم میکنم نیازی به اموزش دیدن نباشه ( کار خاصی نداره )

در مرحله بعدی هم میتونید اموزش html - css و... رو یاد بگیرید .


اقا امید : من فکر میکنم استاندارد سازی طراحی بهتر از فله ای طراحی کردن باشه ( اخه استاندارد که باشه شما میفهمی داری چیکار میکنی , یه طرح داری زمانت بهینه تقسیم میشه , حیطه کاریت مشخص میشه , ولی قتی طرحی نداری مجبوری هم کد بنویسی هم رو طرح فکر کنی , اینجوری هم زمانت رو از دست میدی هم نمیفهمی اخرش چیکار میکنی )

+ طراح اونقدر باید خبره باشه که بتونه طرحی رو که به مشتری ارائه میده از پسش بر بیاد نه اینکه زیرش گیر کنه و یا نتونه اسلایدر امادره رو ادیت کنه .
++ مشتری رو شما همیشه خنگ فکر کنید ( دیدگاهی که یک طراح نسبت به طرح داره , هیچ وقت یک مشتری نسبت به اون طرح نداره ) بر همین اساس طراح برای راحتی کار خودش و سلیقه مشتریش نیازمند یک الگوریتم قبل از کد نویسی است . ( من داشتم مشتری که حتی تا چندین بار رنگ بندی و امکانات رو عوض کرده , بلکل ظاهر قالب تغییر کرده , خب اینجوری اگه بیام کد بنویسم , فکرشو بکنید چقدر زمان میبره Edit کنم . با مشتری هم که نمیشه دعوا کرد و ردش کرد . )

نتیجه : پس الکوریتم - چارت قبل از کد نویسی الزامی است .


الگوریتم و چارت همون گرید بندیه که بر اساس نیاز مشتری متغییره.
شما رو یه برگه ی کاغذ هم میتونید اینکارو کنید حتی با پینت دیگه نیازی نیست که بشینی از تو فتوشاپ یه طرح کامل رو بزید که ایا مشتری قبول کنه یا نه.قبل کار شما به مشتری مشاوره میدی برای چی؟؟برای همین که نخوای یه طرح و چند بار عوض کنی و طبق قرارداد عمل کنی.طرح عوض شه یعنی اینکه یه تم جدید که اونوقت پولشو از مشتری میگیری امکانات جدید و خارج از قرارداد خواست هم همینطور.
من روشم اینطوریه گفتم که هرکس روش خودشو داره هیچ کسیم نمیتونه ادعا کنه مال من استانداردشه
یا هرچی...
شما دوست دارید اینکارو کن منم روش خودمو دارم
یادمونم نره که هدف از ایجاد css3 استفاده ی کمتر از عکس و جاوااسکریپت هست حالا هرجور مایلی.
درباره ی اسلایدر هم بگم که ربطی به کار واردی نداره منظور من این بود که وقتی خودت یه کد رو ننوشتی و میخوای رو کار یکی دیگه ادیت انجام بدی مشکلاتت 2 برابر میشه این مسئله تو همه ی زمینه ای هست
فقط باید 2 ساعت بزاری ببینی طرف چیکار کرده