カテゴリ: Webデザイン

このエントリーをはてなブックマークに追加 Share on Tumblr Clip to Evernote 編集




◆ DTPの方へ!はじめてのWebデザイン&サイト構築セミナー
細かいことはいいからAdobe MuseでサクッとWebサイトを作ろう!というセミナーです

◆ スクリプトを使っていきなりIllustratorの上級者になろうセミナー
いきなり上級者になってイイんです!スクリプトの使い方イチから教えます

◆ 自分の強みをサクッと活かして商売にしちゃう教科書
会社を辞めたい!でも独立は不安…そんなあなたに(会員登録せずに購入できます)

◆ 自分でスクリプトを作ってみたい!そんなあなたはこちらから
ひとりで書ける!ちょい足しスクリプトマガジンZ

◆ スクリプト制作承ります!まずはお気軽にご相談ください m(_ _)m
イラストレーター用スクリプトの受注生産やってます



■ 細かいことはいいからAdobe MuseでサクッとWebサイトを作ろう

 おつかれさまです。GOROLIB DESIGNの渋谷吾郎です。

 こちらも2018年2月に控えた『10倍ラクするIllustrator仕事術』CC 2018対応版の発売を記念して、「はじめてのWebデザイン&サイト構築セミナー」を開催しますので、みなさまふるってご参加くださいませ。


■DTPの方に向けたセミナーです

 このセミナーはDTPの方に向けて、WebデザインとWebサイト構築ができるようにする企画です。

 私もDTP出身なものですから「渋谷さんってWebもできるの?」というご相談には、お応えできずにたいへん悔しい思いをしておりました。

 とはいえHTMLやCSSの知識を会得するには荷が重く(再び学校に通おうかとも思いましたが)、なんとかコーディングなしでできる手法がないか探していました。

 ちなみに私は元システム屋ですので、余計に「できるでしょ?」というお問い合わせが多かったのですが、システム屋でも分野が違うと全く触れない分野ですので、長いあいだ恥ずかしい思いをしておりました…。


■ せっかくのCC(Creative Cloud)をフル活用しましょう!

 このセミナーはCC(Creative Cloud)ユーザーに向けた企画となります。WebデザインにはIllustrator CCを、Webサイト構築にはAdobe Muse(アドビ ミューズ。以下Muse)を使います。

 あらためて確認すると、Creative Cloud(以下CC)にはPhotoshopやInDesign以外にもさまざまなアプリケーションが揃っています。
42

 せっかくのCCでこれらを使わないのはもったいないですね!MuseとはコーディングせずにWebサイトが構築できるものであり、Webオーサリングツールと呼ばれます。いわゆるウェブページ作成ソフトですね。このセミナーではこのMuseを使ってWebサイト構築を行います。

 当日はハンズオン形式で進めますので、これらアプリの事前インストールと、PCのご持参をお願いいたします。


■ HTMLやCSSの知識は必要ありません!

 このセミナーはMuseを使ってコーディングいらずでWebサイト構築をするものです。またWebサイト構築にあたって、IllustratorによるWebデザインの手法も合わせてご案内します。


■ ドメインの設定方法まで!ていねいに解説

 加えて私たちがもっともわかりづらく、ナゾに包まれている(と思われる)Webサーバーの設定や、ドメイン(xxx.co.jp)の取得・設定方法、そしてそれが実際に開通するまでの要領をていねいに解説いたします。

※ただしドメインは契約購入する必要がありますので、このセミナーではドメイン設定の実践はせず、説明・ご案内にとどめます。


■ 開催日時

※どちらかの日付をお選びください
・2018年1月24日(水)  13:00〜16:00
・2018年1月31日(水)  13:00〜16:00


■ 料金

・税込15,000円(3時間・5分休憩×3回)
(SEE'DHOUSE シードハウスコワーキングオーナーの方は、税込12,000円)


■ 開催場所  

・SEE'D HOUSE シードハウス(旧えいごや)湘南台店

 神奈川県藤沢市湘南台3丁目7-4 クリエイト湘南1F
 小田急線・相鉄いずみ野線・横浜市営地下鉄「湘南台駅」出口Bという階段を上がり直進2分、「湘南台駅西口」という交差点のカドでございます


■ ご予約はこちらから

・ご予約は以下よりお願いいたします。

・こちらからメール返信いたしますので、その時点でご予約完了となります。


■ 当日の持ち物

・macOSのノートPC(バージョンCC以降のIllustrator、Museがインストールされていること)

・ノートPCの電源ケーブル(バッテリーが不安な方/会場に電源はございます)


■ 講師プロフィール

 渋谷 吾郎(しぶや・ごろう)

 グラフィックデザイナー/GOROLIB DESIGN代表。主にIT企業系の商業デザイン(DTPおよびWeb)に携わる。
 GOROLIB DESIGN - はやさはちから -(http://gorolib.blog.jp/)では、スクリプトを使った様々なIllustratorの効率化を提案しており、その業務に即した内容は高く評価されている。またスクリプト実践セミナーを定期的に開催し、広く啓蒙に努めている。


■ その他

 会場は飲食が可能ですが、お飲み物などはご自身でご用意ください。


■ お問い合わせ

 セミナーについてご不明な点がありましたら、お気軽にお問い合わせください。

 メールアドレス


以上、よろしくお願いいたします。


お役に立ちましたらツイートお願いします!




このサイトで配布しているイラストレーターのアクションやスクリプトファイルを無断で転載・配布・販売することを固く禁じます。ご紹介いただける際は必ずURLリンクにてお願いいたします。 このサイトで配布しているイラストレーターのアクションやスクリプトファイルの使用で、ファイルの破損やアプリケーションに不具合が発生した場合でも、責任は負いかねますのでご承知おきくださいませ。自己責任での使用をお願いいたします。

© 2017 GOROLIB DESIGN
Released under the MIT license.





このエントリーをはてなブックマークに追加 Share on Tumblr Clip to Evernote 編集




◆ DTPの方へ!はじめてのWebデザイン&サイト構築セミナー
細かいことはいいからAdobe MuseでサクッとWebサイトを作ろう!というセミナーです

◆ スクリプトを使っていきなりIllustratorの上級者になろうセミナー
いきなり上級者になってイイんです!スクリプトの使い方イチから教えます

◆ 自分の強みをサクッと活かして商売にしちゃう教科書
会社を辞めたい!でも独立は不安…そんなあなたに(会員登録せずに購入できます)

◆ 自分でスクリプトを作ってみたい!そんなあなたはこちらから
ひとりで書ける!ちょい足しスクリプトマガジンZ

◆ スクリプト制作承ります!まずはお気軽にご相談ください m(_ _)m
イラストレーター用スクリプトの受注生産やってます



■ 実はpngもsvgもテキストも座標もぜーんぶ揃ってるんですよねぇ(笑)

 おつかれさまです。@gorolibです。

 唐突ですが長い間疑問に思っていることがあります。それはIllustratorでのデザインカンプ制作についてです。

 単位はピクセル、ピクセルパーフェクトで、オブジェクトサイズは端数が出ないように、線がにじまないように(オープンパスなら2px、クローズドパスなら1pxで内側)等々、DTPとは全く異なる気を使います。

 しかしなぜそこまで緻密に仕上げておいて、コーディングに移る際に素材をスライスせにゃならんのか!

 うちの奥さんはデザインにもシステムにも何も関係ない人ですが、そういう人がIllustratorのデザインカンプ画面を見ると

 「え?これでもう出来上がりじゃないの?」

 という疑問を持つそうです。うん…確かにそう思うでしょうね^^;


■そのままポーンとhtmlが生成されたっていいじゃない

 専門外の人の意見が的を得ていることはよくあります。冷静に考えたら全くそのとおりで、Illustratorのデザインカンプからpngもsvgもテキストも座標も全部取得できるのですから。

 それでちょっとフライング気味に作ったのがこちらです。


 このスクリプトはアートボードを1枚のpngとして出力して、ブラウザで校正できるだけの簡易版ですが、この原理で素材出力して配置すれば本格的なHTML&CSSの自動生成ができるのではないか?という推測です。


■リンクやレスポンシブデザインはどうするの?

 こういうツールで悩ましいのは元々のデザインカンプには不要な要素、例えばリンクやレスポンシブデザインに必要なブレークポイントはどうするのかという問題です。線引きは微妙ですが、このスクリプトありきでWebデザインを始めてしまうと、Illustrator操作時に意識がそこに持って行かれるおそれがあります。

 例えばサブレイヤー名をURLにしておくと<a ref…>タグになるなどの機能を持たせておくと、デザイン中に余計な意識が必要になってしまいます。

 ですので余計な機能は付けないつもりです。その代わり、コーダーさんがちょい足しすればいいだけの本格的な構成にするつもりです。「そのためだけに」Illustratorのデータを付け足さない、揃っている情報だけでベースをつくるというコンセプトを予定しています。

 自動コード化にあたってHTML&CSSをゼロから勉強中です。実は目からウロコなことがたくさんあってお恥ずかしいかぎりです///


 というわけでこの本格版は制作中です。気長にお待ちくださいませm(_ _)m

 お役に立てれば幸いです!ではでは出羽の海。
お役に立ちましたらツイートお願いします!




このサイトで配布しているイラストレーターのアクションやスクリプトファイルを無断で転載・配布・販売することを固く禁じます。ご紹介いただける際は必ずURLリンクにてお願いいたします。 このサイトで配布しているイラストレーターのアクションやスクリプトファイルの使用で、ファイルの破損やアプリケーションに不具合が発生した場合でも、責任は負いかねますのでご承知おきくださいませ。自己責任での使用をお願いいたします。

© 2017 GOROLIB DESIGN
Released under the MIT license.





このエントリーをはてなブックマークに追加 Share on Tumblr Clip to Evernote 編集




◆ DTPの方へ!はじめてのWebデザイン&サイト構築セミナー
細かいことはいいからAdobe MuseでサクッとWebサイトを作ろう!というセミナーです

◆ スクリプトを使っていきなりIllustratorの上級者になろうセミナー
いきなり上級者になってイイんです!スクリプトの使い方イチから教えます

◆ 自分の強みをサクッと活かして商売にしちゃう教科書
会社を辞めたい!でも独立は不安…そんなあなたに(会員登録せずに購入できます)

◆ 自分でスクリプトを作ってみたい!そんなあなたはこちらから
ひとりで書ける!ちょい足しスクリプトマガジンZ

◆ スクリプト制作承ります!まずはお気軽にご相談ください m(_ _)m
イラストレーター用スクリプトの受注生産やってます


※このスクリプトは、スクリプト使い放題マガジン2(月額)に含まれています。


■縦長アートボードをA4サイズ(複数枚)に印刷したいんです!


 おつかれさまです。@gorolibです。

 今回はWebデザインなどで縦長なアートボードを自動的に1:√2の比率で複数枚PNG出力するものです。なんで1:√2なのかといえば、A4でもB5でもコピー用紙のサイズって1:√2なんですよね。つまり印刷しやすくするスクリプトなのです。


 使い方はカンタン、印刷したいアートボードをアクティブにして、このスクリプトを起動するだけです。アートボード幅を1、高さを√2として分割してPNG出力します。


■実はmacOSのプレビューって印刷がはやいんです

 縦長アートボードで複数枚印刷するってことは「ページ物」としてPDF出力も考えたのですが、ちょいとむずかしい^ ^

 加えて(言い訳じゃないんですけど^ ^)macOSでプレビューアプリからの印刷ってものすごく早いんですね。PNGのデフォルトアプリはプレビューです。なのでPDF出力で悩んでいるよりは、PNG出力でサクッと仕上げた次第です。
m(_ _)m


■今回のスクリプト情報
【スクリプト概要】
縦長のアートボードを1:√2の比率で複数枚PNG出力して(A4サイズなどに)印刷しやすくします

【スクリプトファイル名】
G396_AdjustPrint.jsx

【使い方】
(1)PNG出力したいアートボードをアクティブにします
(2)このスクリプトを起動します
(3)縦長のアートボードの上から順にアートボード幅を1として高さ√2の比率で分割してpng出力します

お役に立てれば幸いです!ではでは出羽の海。


■ダウンロードはこちらから
お役に立ちましたらツイートお願いします!




このサイトで配布しているイラストレーターのアクションやスクリプトファイルを無断で転載・配布・販売することを固く禁じます。ご紹介いただける際は必ずURLリンクにてお願いいたします。 このサイトで配布しているイラストレーターのアクションやスクリプトファイルの使用で、ファイルの破損やアプリケーションに不具合が発生した場合でも、責任は負いかねますのでご承知おきくださいませ。自己責任での使用をお願いいたします。

© 2017 GOROLIB DESIGN
Released under the MIT license.





↑このページのトップヘ