サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
blog.karasuneko.com
2枚の書類を1枚におさめて印刷したい！たくさんの画像の一覧を印刷したい！そんなときに知っておくと、じつはちょっと便利なのが「プレビュー」。 今回はMacOSに標準で入っているアプリ「プレビュー」で、１ページに並べて印刷できる方法をご紹介します。 以下からどうぞ！ 1. 「プレビュー」で写真を開く 今回は我が家のかわいい猫たちの写真を用意しました。 これをまとめて「プレビュー」で開きましょう。 2. 印刷のウィンドウを表示 プレビューの「ファイル」→「プリント」（またはCommand＋P）で、印刷のウィンドウを表示します。 3. プルダウンからレイアウトを表示 プルダウンの「プレビュー」と書いてあるところをクリックします。 そのすぐ下にある「レイアウト」を選択します。 4. １ページに何枚表示するか選ぶ 「ページ数／枚」という項目で、1ページの中に何枚並べるか選びます。今回は16枚にしました
日本語に用いられる文字「漢字・カタカナ・ひらがな」たちは、そもそも縦に書くための文字です。 現代では、ネットが普及し当たり前の存在になっています。 そして、当たり前のように横書きがされています。 最近の若年層は、むしろ横書きの方が慣れてしまっているのではないのでしょうか？ 目次 ・１、日本語の文字は「縦書き」が美しい ・２、「流れが止まる」横書きの日本語の文字 ・３、縦書きの流れが美しい「日本の古筆」 ・４、なぜ、日本語は横書きにしても読みづらくないのか ・あとがき １、日本語の文字は「縦書き」が美しい 私は、日本語の文字「漢字・カタカナ・ひらがな」は、 縦書きこそ美しいと思っています。 あくまでもローマ字などの文字は、元から横書きしていた文字なんです。 それを無理やり縦から横にされちゃって…。私は日本語たちがときどきかわいそうに思うぐらいです。 ２、「流れが止まる」横書きの日本語の文字
2017年5月から「デザインメモ 2.0」(designmemo.jp)にて更新しています
グラフィックやWebなど文字に関わる人なら誰もが知っていると言っても過言ではない王様フォント「Helvetica」。Macでは標準で入っていますが、Windowsには入っていません。なので、WindowsではHelveticaの代わりとして「Arial」というフォントが使われます。 HelveticaとArialはとても似ているフォントですが、実際にどのくらい字形や印象が違うのでしょうか？ 字形の違い colisさんで下記のような記事が紹介されていました。 ArialとHelveticaの違いがはっきりと分かるこの一枚 画像をみるだけで形の違いがわかります。（青がArial、赤がHelvetica） arial & helvetica (via: swissmiss) Helvecitaの方が少し手書きの名残りを残したような柔らかい形をしていますね。 どっちがHelvetica？ 企業ロゴ
普段、画像解像度を「dpi」と言っているのですが、いざPhotoshopで確認すると「ppi」と書いてあります。 ・・・ん？「ppi」ってなんだ？！と、そういえばdpiの意味もよく知らなかったので、調べてみました。 以下からどうぞ。 目次 １、そもそも、解像度って？ ２、解像度の単位とは？ ３、dpiとppiは、ほぼ同じ意味で使われる ４、でも、なぜほぼ同じ意味なのに2つあるの？ １、そもそも、解像度って？ 簡単にいうと、写真などのイメージの「密度」を数値化したものです。 解像度の数値が高ければ高いほど、よりきめ細かい綺麗なイメージ（高解像度）ということになります。 解像度の違い “Resolution illustration“. Licensed under Public domain via ウィキメディア・コモンズ. ２、解像度の単位とは？ 解像度を表す単位は、一般的に「dpi」と
今までの就活や転職などの経験から、私なりのポートフォリオの作り方やポイントをまとめてみました。なので、グラフィックやWebデザイナーさん向けですが、クリエイティブ業界全般の方にも参考になると嬉しいです。 目次 はじめに：そもそもポートフォリオって？ Step 1：どんなポートフォリオを作ろう Step 2：今までの制作物をリストアップ Step 3：ラフを書いてページ構成を確認 Step 4：印刷データを作る Step 5：印刷・製本する 最後に：完成させるためのコツ おまけ：私のポートフォリオはこんな感じ はじめに：そもそもポートフォリオって？ ポートフォリオとは、簡単にいうと「作品集」のことです。 ポートフォリオは場面によって他にもいろいろな解釈があると思いますが、この記事では「クリエイティブ業界へ就職するために、自分の制作物をまとめたもの」＝「ポートフォリオ」と位置づけてお話ししてい
Photoshopで背景にパターンオーバーレイで模様をつけました。 ですが、いざコーディングするときに書き出そうとしたら困ってしまったので、その方法を書き留めておこうと思います。 ※記事で紹介している環境はPhotoshop CC（Mac OS）です。 今回背景パターン素材として書き出したいのは、 ・レイヤースタイルのパターンオーバーレイでパターンを適応 ・比率を10%にして（図１） ・なおかつカラーオーバーレイで描画モードをスクリーンにした（図２） という、大変面倒なパターン素材です。 （図１） （図２） １、元のパターンの大きさを調べる 比率もカラーオーバーレイも反映されていない、元素材であるパターンのサイズを調べます。 まず、レイヤースタイルパネルのパターンオーバーレイを表示します。 次に、パターンのプルダウンを押して、調べたいパターンの上にマウスをしばらく置いておくと詳細【パターン
同じ小塚ゴシックなのに、後ろに「Pr6N」「Pro」「Std」がついてるけど何が違うんだろう？ いつもどれを使ったらいいのか、違いもよくわからずに日本語フォントを選んでいたので、今回調べてみました。以下からどうぞ！ 「Std/Pro/Pr5/Pr6」はアドビが決めた規格で変わる モリサワをはじめとするフォント製品は、アドビシステムズ社（以下アドビ）が日本語フォント製品用に決めた規格 「Adobe Japan Character Collection for CID-keyed Fonts」 に添って作られています。 （Adobe-Japan-1-6 Character Collection for CID-keyed Fonts 5078.Adobe-Japan1-6.pdf） その規格は、Adobe-Japan1-3やAdobe-Japan1-4のような文字セットのバージョンのようなもの
CSS（スタイルシート）でfont-sizeを指定するとき、pxを使わない方がいいと聞いたことがあります。 ですが、pxで指定しないとなると、今度はemと%が出てきて、どれがいいんだ？といつもよくわからないまま使っていました。 なので、どれがいいのか？そもそもこの単位たちは何なのか？復習も兼ねて調べてみました！ 目次 ・なぜ「px」で指定しない方がいいと言われているの？ ・font-sizeにおけるpx、em、%の簡単な用語説明 ※一部修正・削除（2016年12月11日） ・px、em、%の違いは、絶対？相対？ ・IEライクなfont-sizeの指定方法 ・古いIEを気にしない、スマホサイトは「rem」がおすすめ ※追記（2014年10月1日） なぜ「px」で指定しない方がいいと言われているの？ むかしむかし「IE」で文字の拡大ができない問題 ブラウザには今見ているWebサイトを拡大できる
クリスマスも終わると、あっという間に年末年始ですね。 洋風から一気に日本らしい装飾に切り替わる時期。 今回は、日本の“わびさび”を感じられるWebサイトデザインを集めてみました。 下記からどうぞ！ 目次 旅館・施設のWebデザイン お寺・神社のWebデザイン 料亭・店舗のWebデザイン 商品・工芸品のWebデザイン その他 旅館・施設のWebデザイン 京都 貴船荘 | 貴船の川床 京料理 https://www.kibunesou.com/ 九州 武雄温泉 御船山楽園 http://www.mifuneyamarakuen.jp/ 式年遷宮記念 せんぐう館 http://www.sengukan.jp/ お寺・神社のWebデザイン 音羽山 清水寺 http://www.kiyomizudera.or.jp/ 寒川神社 http://samukawajinjya.jp/ 料亭・店舗のWebデ
ホームページ欲しいけど、デザインできないし、HTML？FTP？とか難しそうだし…。でも、ブログやpixivじゃ味気ない！簡単におしゃれなポートフォリオサイトっていうものが欲しいの！ と、思っているイラストレーターさんに、私がぜひオススメしたいのが「Tumblr」。 Tumblrを使えば、ブログを書くように、簡単にポートフォリオサイトを作って更新できるんです。しかも、無料！ この記事では、実際にTumblrで開設してからイラストの更新までご紹介します！ はじめに Tumblrとは？ Tumblr ブログの縮小版、ミニブログといった感じのWebサービスです。 あと、Facebookのようにシェアしたりいいねをつけたりできるソーシャルネットワーキングの機能もあわせもっています。 おもに画像収集に使われることが多いサービスですね。 Twitterの画像版みたいな。 どうしてTumblrがおすすめな
MacとWindows間で、Illustratorのテキストを編集するデータを作成する機会がありました。 その時に「あらかじめお互いで使えるフォントがわかればいいな」と思ったので、Adobeのヘルプにのっているリストを見ながら一覧を作ってみました。 以下からどうぞ！ Illustrator CC/CS6/CS5/CS4/CS3をインストールするだけで使えるようになるフォント一覧 今回一覧にしたのは、Illustratorをダウンロードしたときに一緒に入るフォントのみです。付属のDVDなどに入っている、あとで追加できるフォントは含まれていませんので、ご注意を。 なので、基本的にIllustratorさえ入れてればOKなフォント一覧ということです！ Illustrator CC … [C] CS6 … [6] CS5 … [5] CS4 … [4] CS3 … [3] ※ （）の中はウェイトご
縦書き日本語を使用したWebサイトデザインを、活用してる箇所別にピックアップしてみました！ ガッツリ使い時、アクセントとして使い時、それぞれの参考にどうぞ。 サイト全体に活用（タイトル＋メインビジュアル＋見出し＋本文＋メニュー） 貝と酒 贔屓｜ひいき｜仙台 http://tf-corp.co.jp/hiiki タイトル＋見出し＋メニュー ふじきみつ彦 – mitsuhiko fujiki http://fujikimitsuhiko.com/ タイトル＋メニュー さんち 〜工芸と探訪〜 https://sunchi.jp/ タイトル 神勝寺 禅と庭のミュージアム http://szmg.jp/ メインビジュアル＋見出し＋メニュー アップルファームさみず http://www.applefarm-samizu.com/ メインビジュアル＋見出し＋本文 肘折温泉 現代版湯治場 お店・お宿案内
4月から新しくデザインの会社で働くという方も多いのではないのでしょうか。 そんな新人デザイナーさんにおすすめしたい、現役のWebデザイナーである私が『本当に使ってる』or『新人の時に使っていた』デザイン関連の本を紹介します！ Illustratorの初歩からテクニックまで Illustratorデザインメソッド 新人デザイナーさんにはこの本は抑えておいて欲しい！さまざまなイラレのテクニックがわかりやすく紹介されています。 PhotoshopとIllustratorをうまく使いこなす Photoshop+Illustrator Design Technique こちらも私が新人のときにお世話になった本です。フォトショ、イラレそれぞれ特性をうまく使いこなしたいときに。 覚えておきたい写真加工テクニック ほめられデザイン事典 写真レタッチ・加工 Photoshop フォトショでのさまざまな写真の
Webデザインの中でも、ちょっと個性的な幼稚園・保育園のWebサイトを集めてみました。 色の使い方はパステルカラーで、イラストなどをふんだんに取り入れたアナログ感。 ぜひ、やわらかい雰囲気を作るときに参考にしてみては？ 北九州市戸畑区 幼稚園｜教学寺幼稚園 http://kyougakuji-kids.com/ やさか保育園 http://yasaka-hoikuen.net/ 京都市山科区のこども園｜おおやけこども園（おおやけほいくえん）http://www.ooyake.net/ 社会福祉法人富士会 富士保育園 http://atami-fujihoikuen.jp/ 認定こども園 小浜こども園 小浜幼稚園 小浜保育園｜長崎県雲仙市の教育・保育 http://obama-kodomoen.jp/ 押原こども園│山梨県昭和町の認定こども園 http://www.oshiharakodom
私が常にRSSなどに入れてチェックしているWebデザインのギャラリーサイトを並べてみました。 ときどきギャラリーサイトをチェックしている方は、新たなギャラリーサイトを見つけてみたり。全然チェックしてない方は、これを機にブックマークへ追加してみたり。ぜひお役立てください〜！ ＜ 目次 ＞ 国内のまとめサイト 総合 縦長・ランディングページ スマホ・レスポンシブ パーツ別 海外のまとめサイト 総合 アワード形式 スマホ・レスポンシブ 国内のまとめサイト 総合 AnotherBookmark™ http://www.anotherbookmark.com/ straightline bookmark http://bm.straightline.jp/ I/O 3000 | Webデザインギャラリー http://io3000.com/ Web Design Clip | Webデザインクリップ
要素を選択したり、動画の再生や時間の流れに合わせたり。大きなサークルを効果的に使ったWebサイトを集めてみました。 使いどころは少ないかもしれませんが、うまくハマると個性的なサイトになりますね。 最初の2枚だけGIFアニメ画像にしてます。 Funny hours http://www.funnyfunny.jp/ Configura tu VW http://www.configuratuvw.mx/ Trippeo – Easy Business Travel & Expense Management http://www.trippeo.com/ 30u – SLIP ON http://www.30u.it/ Designer Interactif – Mathilde Jacon http://www.mathildejacon.com/ KUROKAWA WONDERLAND h
Photoshopの「Web用に保存」の設定をなんとなくやっていませんか？ 私もそのうちの一人です。今日からその“なんとなく”とおさらばするために、今回は「カラープロファイルの埋め込み」について調べてみました。 目次 1、チェックなしすると画像の色が変わってしまう 2、カラープロファイルについて 参考資料 カラープロファイルを使用した画像は、「カラープロファイルの埋め込み」にチェックを入れて保存する必要があります。 1、チェックなしすると画像の色が変わってしまう 環境やデバイスによって、画像の色が変わってしまうことがあります。 下図は、実際にGoogle ChormeとSafariで画像を表示して、色を比べてみたものです。カラープロファイルを埋め込まなかった方は、Google Chromeでカラーコードの数値が微妙に変わってしまっています。 2、カラープロファイルについて 2-1、カラープ
恥ずかしながら、実際に私が学生の時に作ったポートフォリオの中身をまるっと載せてしまいました！ 前回はポートフォリオの作り方について書かせて頂きましたが、私は「段階的にバージョンアップする」ことをオススメしているので、その理由が少しでも伝わればなと思っています。 ※ 先に注意点として、学校の課題がほとんどなので、団体名や企業名などが出てきますが一切関係ないものもあります！モザイクかけないでそのままにしてますが、大目に見てください〜。 ※ あと、上記の理由から画像の転載も禁止です！ 目次 ・１冊目（2年次）2010年8月頃制作 ・２冊目（2年次）2010年11月頃制作 ・３冊目（3年次）2011年6月頃制作 ・４冊目（3年次）2011年6月頃制作、9月頃改変 １冊目（2年次） 2010年8月頃制作 A4ファイル 真ん中の矢印はそこにポケット口があったため、そこから紙を取り出して見れますよという
「Webサイトを作って欲しい。あと、スマホ版も作ってもらえると…。」 あまりWebに詳しくない方とお仕事をする機会があって、ちょっと私の説明が悪くてうまく理解してもらえず困ったことがありました。なので、どうしたらWeb初心者の方にわかりやすく説明できるかな・確認できるかなと思い、自分の反省を含めて書いてみました。 （※図のスクショ画像は例です） 依頼内容は簡単に言うと、上記にも書いたようにWebサイトのPC版とスマホ版が欲しいということでした。 1、とりあえず「動き」を確認する 一番最初に確認しておくべきだなと思ったのは、 Webサイトに訪れた際の「動き」です。 あるWebサイトへ訪れた際に、 A）見ている端末（PCやスマホ）によって「自動で表示切替する」方がいいのか？ はたまた、 B）スマホで訪れた際にポップアップを出して、PC版で見るのかスマホ版で見るのか選ぶことができるのか？ それと
簡単な図説やモックアップに使えそうな、人のイラスト無料素材です！ 表情や髪型も自由に組み合わせられるので、遊んでみてください。 私が描いたラクガキですので、非営利も商用利用も問いません。 良識の範囲内で、ご自由に使ってくださいませ！ ＜サンプル＞ ダウンロードは下記からどうぞ Illustrator mockman_01_ai.zip , EPS mockman_01_eps.zip ※Illutrator CS4以上です。
スマホ版サイトやアプリのデザイン確認を快適にしてくれる、便利なMacのアプリ「Skala Preview」をご紹介します。 このアプリ、Photoshopで作業しながら、スマホの画面でリアルタイムにデザインが確認できるんです！しかも無料！ もし、今まで私のように（JPEGに書き出す→Google Driveに入れる→iPhoneで表示して確認…）やっている方は、「Skala Preview」をぜひ使ってみてください！ 使うために必要な環境 Mac OS X（10.8以上） iPhone（iOS 1.7以上）またはAndroid（1.2.2以上） Adobe Photoshop（CS5以上） ※上記は2014年7月30日時点の情報です。最新の情報は公式サイトで確認してください。 Skala Previewの使い方 設定は簡単で、10分ほどで終わります。 全体の流れ 手順１：まずはMacとスマ
この機能を知ったらすぐ使いたくなった「スマートオブジェクトのリンク」をご紹介します。 先日、Photoshopの「CC 2014」が登場しました。 新機能の項目で目に留まったのが「スマートオブジェクトの強化」。そのリンク先で「スマートオブジェクトのリンク」のチュートリアル動画を観た私は驚愕したわけです(ﾟдﾟ)！ スマートオブジェクトのリンク機能とは？ 「スマートオブジェクトのリンク」は、「Photoshop CC 2014」が登場する一つ前のバージョン「Photoshop CC 14.2」から追加された機能です。 実際に行う作業としては、Photoshop上で「リンクを配置」という項目を使います。 「リンクを配置」を使うことで何が良いのかというと、 複数ファイルで共通部分があるときの“修正が簡単”になります。 いわば、共通部分をリンクすることで、一つのファイルだけ修正すればすべてに反映さ
次のページ
このページを最初にブックマークしてみませんか？
『デザインメモ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
