2012年7月26日木曜日

WebページのデザインはAdobeIllustratorで、其の2

WebページのデザインはAdobeIllustratorの続きです。
私はテキストエディタでhtmlのコーデイングしている事は書きました。
実際には初めに制作したhtmlを編集、拡張しながらページを増やしていっています。
まずはIllustratorでデザインしたイメージをPhotoShopでhtml用の画像に変換します。
次に、IllustratorとSafari、フリーのテキストエディタCotEditor(CSS用)、mi(html用)等を同時に開いて、基本となるheader、footer、bodyコード等を移植します。
それから、スタイルシート書き込みながら、htmlにセットして、Illustratorからテキストをコピーペースト、画像リンクさせてブラウザで表示を確認。
この作業を繰り返してコツコツ作り込んでゆきます。
プロのWebクリエーターの様な知識は無いので大変です。

ほぼ完成に近くなると、一度WindowsPCのIEで表示して検証します。
これがとても大変、
SafariとIE6、7、8、9、表示がバラバラなので、CSSハックで調整する事になります。
最近、先にWindowsメインでコーディングした方がいいのかな?と思い始めています。

昨日、新しいページをアップしました。
「DTP@デザイン・こんな事・知ってる!知らない?」というページです。
DTPデザインに関する知り得た役立つ情報を掲載してゆこうと思っています。
Windowsで一度確認はして、その後面倒なので未確認のままアップしました。

★素材集の宣伝です。
私たちが始めて製作して発売したイラスト素材集です。
今までにないカット集で、自信作でした。
真似をした製品も出てきましたが、真似をされる程「いいね!」と
言う事ですか・・・と思っています。
DIGIGRA PICTURE ワンダフルカットシリーズ
シンプル、シンボリックな可愛いワンポイントイラストです。



















シンプルだけど、少しこだわったフォルムが特徴です。
3タイトル合計4861点
製作に数年かかったタイトルです。

2012年7月4日水曜日

WebページのデザインはAdobeIllustratorで…

▼Webページの制作はコツコツ、テキストエディタで!の続きになります。
販促物の制作はデザインは全てAdobeIllustratorとPhotoShopで一応足ります。
ページ物もカタログもAdobeIllustrator。
・QuarkXPressもInDesignも持ってはいますが、使っていません。というより、使う機会がないのと、InDesignは検証用に購入したので初心者に近いぐらいの知識しかありません。
・QuarkXPressはVer.4ぐらいまではB2のチラシやページ物の制作に使っていたので、中級程度の操作は出来ましたが、Ver.6でアップグレードはストップのままです。アップグレードの案内は来るのですが、必要ないのでそのままにしています。
・Macintosh、Windowsともに色々なアプリケーションを検証用に持っていますが、アップグレード費用が大変です。
それで、Webページを制作するのには、
まずは、↓
「WebページのデザインはAdobeIllustratorで」
Webデザイナーの人はどうしているんだろう?
私は一応、クロッキー帳でサムネールを描いて、現寸のラフの後にAdobeIllustratorでベースのデザインを組み立てます。
初めIllustratorの環境設定で単位をpixelにして、Webのページ2カラムの枠を作り、ガイドラインにしてから、部品を作り、写真画像、文章も同時に入力してレイアウトしてゆきます。
そのページのスクリーンショットです。
リンク:index2.htmlページ















現在のindex2.htmlページは立体のイメージを作って制作しました。
DIGIGRA PICTURE5ベクトル3Dパーツがありますが、残念?ながら自社用のページには使っていません。
★素材集の宣伝.1
ベクトル3Dパーツページ
ベクトル3DパーツはIllustratorで使えるパスデータのボタンやパーツが沢山収録しています。
このページはDreamweaverで制作した初期のページです。


















★素材集の宣伝.2
この時期にお薦めのSummer Image Selectionタイトルを
ご紹介中!jqueryで滲み画像切替のスライドショーでご案内をしています。
宜敷くお願い申し上げます





















リンク:index2.htmlページ