はてなブックマーク

先日、息子の空手教室体験についていったら「お父さんもぜひ！」と勧められて、大人クラスを体験することになり、数日間、体がバッキバキだったスタッフ「ほ」です。 大人になってから、腕や足が上がらなくなるほど運動することがほとんどなかったインドア派なのでとっても刺激になりました。毎週続けるのは無理そうですけど…… さて、今日はWeb用保存のお話です。 イラレやフォトショが使えると「ついでにホームページに載せる画像も作っちゃってよ」なんて頼まれること……ありますよね？ ネットを見ていると「とにかくJPEG派」をよく見かけますが、きちんと保存形式を理解して使い分けることで「軽くて美しい」保存ができるようになります。 Q.保存するならどの形式？ さて、いきなりですが問題です。 上記の画像たち、保存するならどの形式でしょう？答えは、このエントリーの最後に載せておきます。 １．保存形式を知ろう まずは、そも

皆様、ゴールデンウィークはいかがお過ごしだったでしょうか。 わたくしは2回バーベキューしました。バーベキュー大好きです。 でもその分体重がガッツリ増えました。今は減量中です。なんか年中減量している気がします。 スタッフ「ほ」です。 今日はイラストレーターのグラデーションネタです。 １．グラデーションの基本 まずは基本からおさらいしましょう。 オブジェクトを選択し、ツールパネル下部にあるこのマークをクリックするとグラデーションが適用されます。 塗りと線、それぞれにグラデーションを適用することが可能です。（線へのグラデーションはCS6以降） グラデーションは初期設定では線形（左端から右端にまっすぐに変化する）グラデーションになっています。 これを円形のグラデーションに変えるには「グラデーションパネル」を利用します。 パネル内の「種類」を「線形」から「円形」に変更します。 これで円形（中心から外

最近、ノートPCを買いましたスタッフ「ほ」です。 かなり昔に買ったノートPCがダメになってからは、持ち歩いてなかったのですが、やっぱり移動中の時間を有効に使いたいのと、スマホやタブレットではどうしてもやりたいことが満たされないので、思い切って買いました。 持ち運びにも便利な１１インチサイズを買ったので、今のところ有意義に活用できています。 さて、今日はまだまだ終わってなかったセレクタシリーズです。 今日は「属性セレクタ」です。覚えるとかなり便利に使うことができます。 指定した属性を含む要素部分のみを装飾することができます。 むむむ…やっぱり文字にするとわかりづらいですね。 例を挙げていきましょう。 【HTML】 <table width="200"> <tr> <td colspan="3">横結合</td> </tr> <tr> <td rowspan="2">縦結合</td> <td>

もうすぐクリスマス！もうサンタへのお願いは済ませましたか？ 私はどちらかというとサンタ役なので、あげる方です。某ウォッチのぬいぐるみをお願いされました。スタッフ「ほ」です。 今日は、時々いただくご質問で「背景を透明にした写真をイラストレーター上に配置すると透明のはずの部分が濃くプリントされてしまう」というもの。 たとえば、以下のような写真を… Photoshopを使って背景を透明にします。 そのファイルを保存して、Illustrator上に配置します。 PCの画面上で見る分には問題ありませんが… これをプリンターでプリントアウトすると、なぜか透明にした部分の色が濃くプリントされることがあります。 これはプリンターが透明部分をうまく処理できないときに起きる現象で、別のプリンターでは正常に出たりします。 特にレーザープリンターでこの現象が起きるように思います。 これを解消するには、プリントアウ

ここ最近は、残暑も鳴りを潜めて気持ちのよい秋風を感じますね。少ししたら暑さがぶり返すんでしょうけれど… 私は秋が一番好きな季節なので、わくわくしています。 スタッフ「ほ」です。 さて、前回、前々回と擬似クラスをご紹介していますが、忘れちゃわないうちに、さらに畳み掛けていきます。 今回は、使い方が似ていることもあり、４つの擬似クラスを一気にご紹介していきます。 :first-child :last-child :first-of-type :last-of-type ひとつずつ見ていきましょう :first-child 擬似クラス :first-child擬似クラスは、一番最初の子要素が指定した要素だった場合に装飾を適用します。 文字にするとわかりづらいですねぇ…ひとつ例をあげましょう 【HTML】 <ul> <li>オレンジ</li> <li>バナナ</li> <li>ぶどう</li> <

平日のシフト休みを利用して、今更ながらコストコに行ってきました。何もかもがでっかかった！ 何か目にするたびに「おぉ…！」と感嘆するものの、次の瞬間には頭の中で「でも、こんなに食べきれない（使い切れない）よねぇ…」という思いが出てきて、結局何も買わずに出てきてしまいました・・・スタッフ「ほ」です。 さてさて、web系のネタをアップしたいところですが、始めたばかりのイラストレーターツール完全制覇の序盤ですから、今日もイラレネタでいかせてください。 今日、ご紹介するのは「グループ選択ツール」です（なんか言い回しがテレビショッピングっぽいですね） ダイレクト選択ツールの隠しツールになっています。 「グループ選択ツール」というくらいですから、グループ化にまつわる機能です。 １．下準備 グループ化したオブジェクトを作ってみます。 葉っぱを描いて 葉脈を描いたら、グループ化をしておきます。グループ化は、

お盆休みの間は、猛暑日が続いて、この調子じゃ、秋なんてまだまだ程遠いなぁ、なんて思っていたら急転、寒い日が続いております。 そんな気候に、思い切りやられまして、喉の痛みを感じて、「あら？風邪！？」なんていう不安を抱えております。スタッフ「ほ」です。 あまりにも更新がないこのブログを見かねた他のスタッフが、交代で執筆をしてくれるようになりまして、にわかに活気づいてきました。 今週は、私の番なので、張り切っていきたいと思います。 今回のテーマはイラレ。で、ちょっとWeb寄りです。DTPにも応用はできますので、DTPの人もぜひ読んでみてください。 Webの背景画像や、DTPの台紙の模様などにパターンを利用する機会は多いと思います。 Illustratorでは、比較的カンタンにパターンを作成することができますが、実際にそれを適用してみると、いかにも「タイル状に並べました」という雰囲気になってしまい

前回の更新から、かなーり長い時間がたってしまい、どうやって言い訳しようか迷った挙句、何もうまい言い訳が浮かんでこなかった正直者（？）のスタッフ「ほ」です。 すみません、さぼっておりました。 もう、前回のエントリーなんぞ、お忘れかと思いますが、一応、リンクしておきます。 [Photoshop]GIFアニメーション　その１ まず、前回の宿題の答えから… こんな感じになります。 それぞれのコマで必要なレイヤーの表示状態を見極めることができれば、難しくはないと思います。 さて、今回は、もうすこしGIFアニメーションを突っ込んで作るために必要な「トゥイーン」という機能をご紹介します。 まずは完成品から。 ↑こんな感じのを作ります。 以前と何が違うって？ むむぅ・・・わかりづらいですかねー。 文字がふわっと出てきて、ふわっと消えるんですけど。。 こういうの「フェードイン・フェードアウト」って言いますね